Text

Text is used to define label or option text in components.

installyarn add @react-spectrum/typography
version3.0.0-alpha.1
usageimport {Text} from '@react-spectrum/typography'

Example#


<Text>Paste</Text>
<Text>Paste</Text>
<Text>Paste</Text>

Content#


Text is related to typography components and is a child to other components. Text is used to wrap text strings and elements within other components. Based on the component it is used within, it gets Spectrum styling and may have a preassigned slot for positioning. By virtue of its name, the Text component provides semantic meaning in the context they are placed. Examples of its usage in Dialog and Button. It is important to note that the Text component accepts any renderable node, not just strings.

Props#


NameTypeDefaultDescription
childrenReactNodeText content
UNSAFE_classNamestring
UNSAFE_styleCSSProperties
Layout
NameTypeDefaultDescription
flexstringnumberboolean
flexGrownumber
flexShrinknumber
flexBasisnumberstring
alignSelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'stretch'
justifySelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'
flexOrdernumber
gridAreastring
gridColumnstring
gridRowstring
gridColumnStartstring
gridColumnEndstring
gridRowStartstring
gridRowEndstring
slotstring"text"A slot to place the text in.
Spacing
NameTypeDefaultDescription
marginDimensionValue
marginTopDimensionValue
marginLeftDimensionValue
marginRightDimensionValue
marginBottomDimensionValue
marginStartDimensionValue
marginEndDimensionValue
marginXDimensionValue
marginYDimensionValue
Sizing
NameTypeDefaultDescription
widthDimensionValue
minWidthDimensionValue
maxWidthDimensionValue
heightDimensionValue
minHeightDimensionValue
maxHeightDimensionValue
Positioning
NameTypeDefaultDescription
position'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
topDimensionValue
bottomDimensionValue
leftDimensionValue
rightDimensionValue
startDimensionValue
endDimensionValue
zIndexnumber
isHiddenboolean
Accessibility
NameTypeDefaultDescription
idstring