Text

Text is a token-backed typography component to display body text.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/primitives`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/primitives, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`align`
Description	Text alignment.
Type	`"end" \| "start" \| "center"`

`as`
Description	HTML tag to be rendered. Defaults to `span`.
Type	`"em" \| "p" \| "span" \| "strong"`

`children`
Required
Description	Elements rendered within the Text element.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`color`
Description	Token representing text color with a built-in fallback value. Will apply inverse text color automatically if placed within a Box with bold background color. Defaults to `color.text` if not nested in other Text components.
Type	`"inherit" \| TextColor`

`data-testid`
Description	`data-testid` is strictly controlled through the `testId` prop. This lets consumers know that this data attribute will not be applied.
Type	`never`

`id`
Description	The HTML `id` attribute.
Type	`string`

`maxLines`
Description	The number of lines to limit the provided text to. Text will be truncated with an ellipsis. When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
Type	`number`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<any>`

`role`
Description	Accessible role.
Type	`string`

`size`
Description	Text size.
Type	`"large" \| "medium" \| "small"`

`testId`
Description	A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

`weight`
Description	The HTML `font-weight` attribute.
Type	`"medium" \| "bold" \| "regular" \| "semibold"`

`xcss`
Description	Bounded style overrides.
Type	`false \| (XCSSValue<"fontVariantNumeric" \| "overflowWrap" \| "textDecorationLine", DesignTokenStyles, ""> & {} & XCSSPseudo<"fontVariantNumeric" \| "overflowWrap" \| "textDecorationLine", never, never, DesignTokenStyles> & XCSSMediaQuery<...> & { ...; } & { ...; })`

Was this page helpful?

We use this feedback to improve our documentation.