Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Text

The Text component is a primitive of the system and can output any supported text style provided by our design tokens. Coupled with Box, it underpins most of our components.

Version 10.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/text - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Text} from '@twilio-paste/text';

const Component = () => (
  <Text as="p" fontSize="fontSize70" fontWeight="fontWeightMedium">
    Foo
  </Text>
);

Props

Props page anchor

Text

Text page anchor

as RequiredRequired

Controls the HTML element that that will be rendered in the DOM.

Type
keyof IntrinsicElements

_active

Type
TextStyleProps

_after

Type
TextStyleProps

_before

Type
TextStyleProps

_checked

Type
TextStyleProps

_disabled

Type
TextStyleProps

_even

Type
TextStyleProps

_expanded

Type
TextStyleProps

_first

Type
TextStyleProps

_focus

Type
TextStyleProps

_focusWithin

Type
TextStyleProps

_grabbed

Type
TextStyleProps

_hover

Type
TextStyleProps

_invalid

Type
TextStyleProps

_last

Type
TextStyleProps

_mixed

Type
TextStyleProps

_notFirst

Type
TextStyleProps

_notLast

Type
TextStyleProps

_odd

Type
TextStyleProps

_pressed

Type
TextStyleProps

_readOnly

Type
TextStyleProps

_selected

Type
TextStyleProps

_selected_focus

Type
TextStyleProps

_selected_focusVisible

Type
TextStyleProps

_selected_hover

Type
TextStyleProps

_visited

Type
TextStyleProps

bottom

Responsive prop for the CSS bottom property

Type
Bottom<TLengthStyledSystem> | (Bottom<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Bottom<TLengthStyledSystem> | undefined; [x: number]: Bottom<...> | undefined; }

boxShadow

Responsive prop of BoxShadow tokens for the CSS box-shadow property

Type
"none" | "shadow" | "shadowBorder" | "shadowBorderBottomDecorative10Weaker" | "shadowBorderBottomDecorative20Weaker" | "shadowBorderBottomDecorative30Weaker" | "shadowBorderBottomDecorative40Weaker" | ... 59 more ... | { ...; }

color

Responsive style prop of Text Color tokens for the CSS color property

Type
"inherit" | "transparent" | "colorText" | "colorTextBrandHighlight" | "colorTextBrandInverse" | "colorTextDecorative10" | "colorTextDecorative20" | "colorTextDecorative30" | ... 56 more ... | { ...; }

columnGap

Responsive prop of Space tokens for the CSS column-gap property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

content

Sets the CSS content property

Type
string

cursor

Style prop of CSS cursor value

Type
Cursor

dateTime

Same as HTML

Type
string

display

Responsive style prop of CSS display values

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

Used to set a custom element name for customization.

Type
string

fontFamily

Responsive style prop of Font Family tokens for the CSS font-family property

Type
"inherit" | "fontFamilyCode" | "fontFamilyDisplay" | "fontFamilyText" | "fontFamilyTextChineseSimplified" | "fontFamilyTextChineseTraditional" | "fontFamilyTextJapanese" | "fontFamilyTextKorean" | (FontFamilyOptions | null)[] | { ...; }

fontSize

Responsive style prop of Font Size tokens for the CSS font-size property

Type
"inherit" | "fontSize10" | "fontSize20" | "fontSize30" | "fontSize40" | "fontSize50" | "fontSize60" | "fontSize70" | "fontSize80" | "fontSize90" | "fontSize100" | "fontSize110" | ... 6 more ... | { ...; }

fontStyle

Responsive style prop for the CSS font-style property

Type
| FontStyle | (FontStyle | null | undefined)[] | { [x: string]: FontStyle | undefined; [x: number]: FontStyle | undefined }

fontVariantNumeric

Type
| FontVariantNumeric | (FontVariantNumeric | null | undefined)[] | { [x: string]: FontVariantNumeric | undefined [x: number]: FontVariantNumeric | undefined }

fontWeight

Responsive style prop of Font Weight tokens for the CSS font-weight property

Type
"inherit" | "fontWeightLight" | "fontWeightNormal" | "fontWeightMedium" | "fontWeightSemibold" | "fontWeightBold" | "fontWeightExtrabold" | (FontWeightOptions | null)[] | { ...; }

href

Same as HTML

Type
string

inset

Responsive prop for the CSS inset property

Type
Inset<TLengthStyledSystem> | (Inset<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Inset<TLengthStyledSystem> | undefined; [x: number]: Inset<...> | undefined; }

left

Responsive prop for the CSS left property

Type
Left<TLengthStyledSystem> | (Left<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Left<TLengthStyledSystem> | undefined; [x: number]: Left<...> | undefined; }

letterSpacing

Responsive style prop for the CSS letter-spacing property

Type
LetterSpacing<0 | (string & {})> | (LetterSpacing<0 | (string & {})> | null | undefined)[] | { [x: string]: LetterSpacing<0 | (string & {})> | undefined; [x: number]: LetterSpacing<...> | undefined; }

lineHeight

Responsive style prop of Line Height tokens for the CSS line-height property

Type
"inherit" | "unset" | "lineHeight0" | "lineHeight05" | "lineHeight10" | "lineHeight20" | "lineHeight30" | "lineHeight40" | "lineHeight50" | "lineHeight60" | "lineHeight70" | ... 8 more ... | { ...; }

listStyleImage

Responsive style prop for the CSS list-style-image property

Type
| ListStyleImage | (ListStyleImage | null | undefined)[] | { [x: string]: ListStyleImage | undefined [x: number]: ListStyleImage | undefined }

listStylePosition

Responsive style prop for the CSS list-style-position property

Type
| ListStylePosition | (ListStylePosition | null | undefined)[] | { [x: string]: ListStylePosition | undefined [x: number]: ListStylePosition | undefined }

listStyleType

Responsive style prop for the CSS list-style-type property

Type
| ListStyleType | (ListStyleType | null | undefined)[] | { [x: string]: ListStyleType | undefined [x: number]: ListStyleType | undefined }

margin

Responsive prop of Space tokens for the CSS margin property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginLeft

Responsive prop of Space tokens for the CSS margin-left property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginRight

Responsive prop of Space tokens for the CSS margin-right property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginX

Responsive prop of Space tokens for the CSS margin-left and margin-right properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginY

Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

outline

Style prop of CSS outline value

Type
Outline<0 | (string & {})>

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowWrap

Responsive style prop for the CSS overflow-wrap property

Type
| OverflowWrap | (OverflowWrap | null | undefined)[] | { [x: string]: OverflowWrap | undefined [x: number]: OverflowWrap | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

padding

Responsive prop of Space tokens for the CSS padding property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingBottom

Responsive prop of Space tokens for the CSS padding-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingLeft

Responsive prop of Space tokens for the CSS padding-left property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingRight

Responsive prop of Space tokens for the CSS padding-right property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingTop

Responsive prop of Space tokens for the CSS padding-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingX

Responsive prop of Space tokens for the CSS padding-left and padding-right properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

position

Responsive prop for the CSS position property

Type
| Position | (Position | null | undefined)[] | { [x: string]: Position | undefined; [x: number]: Position | undefined }

rel

Same as HTML

Type
string

right

Responsive prop for the CSS right property

Type
Right<TLengthStyledSystem> | (Right<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Right<TLengthStyledSystem> | undefined; [x: number]: Right<...> | undefined; }

rowGap

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

target

Same as HTML

Type
string

textAlign

Responsive style prop for the CSS text-align property

Type
| TextAlign | (TextAlign | null | undefined)[] | { [x: string]: TextAlign | undefined; [x: number]: TextAlign | undefined }

textDecoration

Responsive style prop for the CSS text-decoration property

Type
TextDecoration<0 | (string & {})> | (TextDecoration<0 | (string & {})> | null | undefined)[] | { [x: string]: TextDecoration<0 | (string & {})> | undefined; [x: number]: TextDecoration<...> | undefined; }

textOverflow

Responsive style prop for the CSS text-overflow property

Type
| TextOverflow | (TextOverflow | null | undefined)[] | { [x: string]: TextOverflow | undefined [x: number]: TextOverflow | undefined }

textShadow

Style prop for the CSS text-shadow property

Type
StyleReset

textTransform

Responsive style prop for the CSS text-transform property. Avoid using this prop if possible, as it can have implications for screen readers and internationalization.

Type
| TextTransform | (TextTransform | null | undefined)[] | { [x: string]: TextTransform | undefined [x: number]: TextTransform | undefined }

top

Responsive prop for the CSS top property

Type
Top<TLengthStyledSystem> | (Top<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Top<TLengthStyledSystem> | undefined; [x: number]: Top<...> | undefined; }

transition

Style prop of CSS transition value

Type
Transition<string & {}>

transitionDelay

Style prop of CSS transition-delay value

Type
TransitionDelay<string & {}>

variant

Used to style custom variants via customization.

Type
string

verticalAlign

Responsive style prop of CSS vertical-align values

Type
VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }

whiteSpace

Responsive style prop for the CSS white-space property

Type
| WhiteSpace | (WhiteSpace | null | undefined)[] | { [x: string]: WhiteSpace | undefined; [x: number]: WhiteSpace | undefined }

wordBreak

Responsive style prop for the CSS word-break property

Type
| WordBreak | (WordBreak | null | undefined)[] | { [x: string]: WordBreak | undefined; [x: number]: WordBreak | undefined }

wordWrap

Responsive style prop for the CSS word-wrap property

Type
| WordWrap | (WordWrap | null | undefined)[] | { [x: string]: WordWrap | undefined; [x: number]: WordWrap | undefined }

zIndex

Responsive prop of ZIndex tokens for the CSS z-index property

Type
"zIndex0" | "zIndex10" | "zIndex20" | "zIndex30" | "zIndex40" | "zIndex50" | "zIndex60" | "zIndex70" | "zIndex80" | "zIndex90" | ("zIndex0" | "zIndex10" | "zIndex20" | "zIndex30" | ... 6 more ... | null)[] | { ...; }