Text

Text applies a text style and a colour from the tokens. The style does not choose the element: set as to render a heading or a span.

import { Text } from '@beyul/sulmu-ui'

Source

Examples

Text styles

All 22 styles are listed on the Typography page.

heading1

heading3

heading6

subtitle

body (the default)

bodyS

label

caption

overline

import { Stack, Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack gap={3}>
      <Text as="h1" textStyle="heading1">
        heading1
      </Text>
      <Text as="h2" textStyle="heading3">
        heading3
      </Text>
      <Text as="h3" textStyle="heading6">
        heading6
      </Text>
      <Text textStyle="subtitle">subtitle</Text>
      <Text textStyle="body">body (the default)</Text>
      <Text textStyle="bodyS">bodyS</Text>
      <Text textStyle="label">label</Text>
      <Text textStyle="caption">caption</Text>
      <Text textStyle="overline">overline</Text>
    </Stack>
  )
}

Tones

default

muted

subtle

brand

danger

success

import { Stack, Text } from '@beyul/sulmu-ui'

const tones = ['default', 'muted', 'subtle', 'brand', 'danger', 'success'] as const

export default function Example() {
  return (
    <Stack gap={2}>
      {tones.map((tone) => (
        <Text key={tone} tone={tone}>
          {tone}
        </Text>
      ))}
    </Stack>
  )
}

Truncate

truncate keeps the text on one line and ends it with an ellipsis.

Keep invoices, payments and statements in one place with a clear view.

import { Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 240 }}>
      <Text truncate>Keep invoices, payments and statements in one place with a clear view.</Text>
    </div>
  )
}

Props

Prop	Type	Default	Description
as	ElementType	p	Element to render, e.g. "span" or "h1". Default: p.
textStyle	"body" | "caption" | "label" | "bodyL" | "bodyS" | "labelL" | "labelS" | "captionStrong" | "overline" | "tiny" | "displayXL" | "displayL" | "displayM" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "subtitleL" | "subtitle" | "subtitleS"	body	Figma text style. Default: body.
tone	"inherit" | "inverse" | "brand" | "success" | "danger" | "subtle" | "default" | "muted"	default	Semantic colour. Default: default (primary text). inherit takes the parent's colour.
align	"center" | "start" | "end"	-
truncate	boolean	-	Keep to one line and end with an ellipsis when it does not fit.

Text also accepts every attribute of the element it renders.

Accessibility and usage

• The default element is p. Pick the heading level from the page structure, not from the size: <Text as="h2" textStyle="heading5">.
• tone="inherit" takes the colour of the parent, and tone="inverse" is for dark surfaces.
• truncate also sets min-width: 0, so the text can shrink inside a flex row.