v1.1.2

Text

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/text

npm @spark-web/text

Source GitHub.com

Bundle unpkg.com

Constrained, purposeful text styles as a component.

Examples

Text large regular

Text standard regular

Text small regular

Text xsmall regular

Text large regular

Text standard regular

Text small regular

Text xsmall regular

Open in Playroom

const textSizes = ['large', 'standard', 'small', 'xsmall'];

return (
  <Columns collapseBelow="tablet" gap="xlarge">
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="regular">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="semibold">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
  </Columns>
);

const textSizes = ['large', 'standard', 'small', 'xsmall'];

return (
  <Columns collapseBelow="tablet" gap="xlarge">
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="regular">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="semibold">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
  </Columns>
);

Align

Text can be aligned with the align prop.

Left (default)

Center

Right

Open in Playroom

<Stack gap="large" dividers>
  <Text align="left">Left (default)</Text>
  <Text align="center">Center</Text>
  <Text align="right">Right</Text>
</Stack>

<Stack gap="large" dividers>
  <Text align="left">Left (default)</Text>
  <Text align="center">Center</Text>
  <Text align="right">Right</Text>
</Stack>

Overflow strategy

Use the overflowStrategy prop to manage how Text behaves with regard to overflow.

Default

The quick brown fox jumps over the lazy dog.

truncate

The quick brown fox jumps over the lazy dog.

nowrap

The quick brown fox jumps over the lazy dog.

breakword

The quick brown fox jumps over the lazy dog.

Open in Playroom

const overflowStrategies = ['truncate', 'nowrap', 'breakword'];

return (
  <Stack gap="large" style={{ width: 200 }}>
    <Stack gap="small">
      <Text weight="semibold">Default</Text>
      <Text>The quick brown fox jumps over the lazy dog.</Text>
    </Stack>
    {overflowStrategies.map(overflowStrategy => (
      <Stack key={overflowStrategy} gap="small">
        <Text weight="semibold">{overflowStrategy}</Text>
        <Text overflowStrategy={overflowStrategy}>
          The quick brown fox jumps over the lazy dog.
        </Text>
      </Stack>
    ))}
  </Stack>
);

const overflowStrategies = ['truncate', 'nowrap', 'breakword'];

return (
  <Stack gap="large" style={{ width: 200 }}>
    <Stack gap="small">
      <Text weight="semibold">Default</Text>
      <Text>The quick brown fox jumps over the lazy dog.</Text>
    </Stack>
    {overflowStrategies.map(overflowStrategy => (
      <Stack key={overflowStrategy} gap="small">
        <Text weight="semibold">{overflowStrategy}</Text>
        <Text overflowStrategy={overflowStrategy}>
          The quick brown fox jumps over the lazy dog.
        </Text>
      </Stack>
    ))}
  </Stack>
);

Tone

The foreground colour of text can be set by applying a tone. In addition to the foundation tones, “muted” provides a way to de-emphasise text.

neutral

accent

caution

critical

disabled

fieldAccent

info

link

muted

placeholder

positive

primary

primaryActive

primaryHover

secondary

secondaryActive

secondaryHover

Open in Playroom

const textTones = [
  'neutral', // Default
  'accent',
  'caution',
  'critical',
  'disabled',
  'fieldAccent',
  'info',
  'link',
  'muted',
  'placeholder',
  'positive',
  'primary',
  'primaryActive',
  'primaryHover',
  'secondary',
  'secondaryActive',
  'secondaryHover',
];

return (
  <Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
    {textTones.map(tone => (
      <Text key={tone} tone={tone}>
        {tone}
      </Text>
    ))}
  </Columns>
);

const textTones = [
  'neutral', // Default
  'accent',
  'caution',
  'critical',
  'disabled',
  'fieldAccent',
  'info',
  'link',
  'muted',
  'placeholder',
  'positive',
  'primary',
  'primaryActive',
  'primaryHover',
  'secondary',
  'secondaryActive',
  'secondaryHover',
];

return (
  <Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
    {textTones.map(tone => (
      <Text key={tone} tone={tone}>
        {tone}
      </Text>
    ))}
  </Columns>
);

Weight

Text is available in two weight: regular and semibold.

Regular

Semibold

Open in Playroom

<Inline gap="small">
  <Text weight="regular">Regular</Text>
  <Text weight="semibold">Semibold</Text>
</Inline>

<Inline gap="small">
  <Text weight="regular">Regular</Text>
  <Text weight="semibold">Semibold</Text>
</Inline>

Contrast

To ensure text has sufficient contrast, when on a dark background the foreground tones “neutral” and “muted” will be inverted.

neutral

muted

Open in Playroom

<Inline gap="large">
  <Box background="neutral" padding="small" borderRadius="small">
    <Text>neutral</Text>
  </Box>
  <Box background="neutral" padding="small" borderRadius="small">
    <Text tone="muted">muted</Text>
  </Box>
</Inline>

<Inline gap="large">
  <Box background="neutral" padding="small" borderRadius="small">
    <Text>neutral</Text>
  </Box>
  <Box background="neutral" padding="small" borderRadius="small">
    <Text tone="muted">muted</Text>
  </Box>
</Inline>

Props

Prop	Type	Description
align?	"left" \| "center" \| "right"	The horizontal alignment.
baseline?	boolean	Apply leading-trim styles.
children?	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	The text content.
data?	DataAttributeMap	Sets data attributes on the component.
id?	string	An identifier which must be unique in the whole document.
inline?	boolean	Display as an inline element.
overflowStrategy?	"nowrap" \| "truncate" \| "breakword"	Manage how text behaves with regard to overflow.
size?	string \| number \| symbol	The size of the text.
tabularNumbers?	boolean	When enabled, numbers will be the same width. Similar to a monospaced font.
tone?	"neutral" \| "muted" \| "link" \| "disabled" \| "fieldAccent" \| "placeholder" \| "accent" \| "primary" \| "primaryHover" \| "primaryActive" \| "secondary" \| "secondaryHover" \| "secondaryActive" \| "caution" \| "critical" \| "info" \| "positive"	The tone of the text.
transform?	TextTransform: "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "capitalize" \| "full-size-kana" \| "full-width" \| "lowercase" \| "none" \| "uppercase"	Transform the text casing.
weight?	"regular" \| "semibold"	The weight of the text.

Extra props are also passed into the underlying Box component.