Components

Text

Sets body text, labels, captions and figures in token typography.

Installation

Text is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

import { Text } from '@bigbang/ui';

<Text size="sm" tone="subtle" truncate={2} title="...">
  ...
</Text>;

size

weight

Description: medium draws the text in the label style of the same size, for field values and emphasis inside a row.
Type: 'regular' | 'medium'
Default: 'regular'

tone

Description: Text colour. Status tones colour the words, never carry the meaning alone: the text or an icon says it too.
Type: 'default' | 'subtle' | 'subtlest' | 'inverse' | 'danger' | 'success' | 'warning' | 'info'
Default: 'default'

truncate

Description: Cuts the text with an ellipsis after one line (true) or after the given number of lines (2-6). Give the full text another way, such as a tooltip or a detail page.
Type: boolean | 1 | 2 | 3 | 4 | 5 | 6

numeric

Description: Tabular figures, so digits line up in columns and do not shift while a value changes.
Type: boolean
Default: false

render

Description: Renders another element, such as <p>, <label>, <strong> or <time>. Defaults to a <span>.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: margins, alignment, width. Do not use it to change the size or colour.
Type: string

children

Native <span> attributes (id, title, aria-*) are passed through.