Skip to main content

Text

Renders a piece of text, providing the ability to specify color, text alignment and size. Inherits from the <Box> component.

Examples

Text

View standalone

Your text here

Code
<Text>
  Your text here
</Text>

Text size

View standalone

Accepts a size prop if it needs to be rendered in a different font-size

Your text here

Code
<Text size="lg">
  Your text here
</Text>

Strong

View standalone

A <strong> element will be rendered if weight="strong" is passed.

Your text here
Code
<Text weight="strong">
  Your text here
</Text>

Text decoration

View standalone

The text will be rendered with specified text decoration

Your text here

Code
<Text decoration="line-through">
  Your text here
</Text>

Text oldstyle numerals

View standalone

These numerals should be oldstyle numerals 123

Code
<Text>
  These numerals should be oldstyle numerals 123
</Text>

Text lining numerals

View standalone

These numerals should be lining numerals 123

Code
<Text
  atoms={{
    fontVariantNumeric: 'lining'
  }}
>
  These numerals should be lining numerals 123
</Text>

Japanese text

View standalone

研究者や所属機関のプロフィール、計量情報学を提供するリソースやツール、さらに、研究の発表、ネットワーキング、および協働を容易にするその他のツールにより、研究者は、自分たちの分野に優れたインパクトをもたらすことができます。

Code
<Text lang="ja-jp">
  研究者や所属機関のプロフィール、計量情報学を提供するリソースやツール、さらに、研究の発表、ネットワーキング、および協働を容易にするその他のツールにより、研究者は、自分たちの分野に優れたインパクトをもたらすことができます。
</Text>

Input Ref

View standalone

Passing an inputRef.

I'm text with a yellow background

Code
<Text
  inputRef={{
    current: '[Circular]'
  }}
>
  I'm text with a yellow background
</Text>

Props

align

ConditionalStyleWithResponsiveArray<Values<("inherit" | "center" | "end" | "start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Sets the horizontal alignment of the content inside the component.

color

ConditionalStyle<Values<MapLeafNodes<Record<"input-disabled" | "input-idle" | "select-disabled" | "select-idle" | "brand-primary" | "brand-secondary" | "action-disabled" | "action-idle" | "action-focus" | "action-hover" | ... 10 more ... | "global-tertiary", string>, CSSVarFunction>, { ...; }>>

Renders content as passed color.

whiteSpace

"normal" | "nowrap" | "pre-wrap"

Configures how white space of content is handled

decoration

ConditionalStyle<Values<("none" | "line-through" | "underline")[], { defaultClass: string; conditions: { idle: string; hover: string; focus: string; disabled: string; }; }>>

as

ElementType<any>

Renders as another element if specified.

size

TextSize

Renders content at the size of the passed value.

weight

"strong"

Renders the element as 'strong' if `weight="strong"` is passed.

fontVariantNumeric

"lining" | "oldStyle"

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509