Text

Text renders a run of copy at a step of the type scale: a paragraph, a label, a caption or a hint. A title for a page or a section is a Heading. Text that takes someone somewhere is a Link.

Playground

Usage

import { Flex, Switch, Text } from '@kushagradhawan/kookie-ui';
 
export function NotificationSetting() {
  return (
    <Flex justify="between" align="center" gap="4">
      <Flex direction="column" gap="1">
        <Text as="label" htmlFor="digest" size="2" weight="medium">
          Weekly digest
        </Text>
        <Text as="p" size="2" emphasis="medium">
          A summary of activity in your projects, sent every Monday.
        </Text>
      </Flex>
      <Switch id="digest" />
    </Flex>
  );
}

Best practices

Rank text with emphasis, not with gray. Use emphasis="medium" for secondary copy and emphasis="quiet" for hints and metadata. The levels follow the theme, so they stay readable in light and dark mode.

Pick the element with as. Text renders a span by default. Set as="p" for a paragraph, as="label" for a form label and as="div" for a block. A screen reader reads the element, not the size.

Keep body copy at sizes 2 and 3. Size 2 (14px) suits interface text and size 3 (16px) suits reading. Larger sizes are for short lines such as a lead sentence or a number on a dashboard.

Use colour for meaning. Set color="red" on an error message or color="green" on a success line. Colour on ordinary copy makes it harder to tell which line matters.

Don't use Text for a title. A large Text still reads as a span or p. Use a Heading, so the page has an outline people can move through.

Emphasis

emphasis sets how strongly text reads. With no color set, the levels step down the neutral ink. With a color set, they fade that colour.

With no color and no emphasis, Text inherits its colour, so it matches the Button, Card or Notice it sits in.

Size

size picks a step from 1 to 9: 12, 14, 16, 18, 20, 24, 32, 44 and 64 pixels at the default scale. Each step sets its own line height and letter spacing. With no size, Text inherits the font size around it. size accepts a responsive object, such as { initial: '2', md: '3' }.

Examples

Error message under a field

Set color so the message reads as an error, and keep it at the field's size.

<Text as="p" size="1" color="red">
  Enter an email address with an @ sign.
</Text>

One line in a narrow space

truncate keeps the text on one line and ends it with an ellipsis. Give the parent a width so the text has a limit to truncate against.

<Box maxWidth="240px">
  <Text as="div" size="2" truncate>
    quarterly-report-final-version-approved.pdf
  </Text>
</Box>

Text aligned to the edge of a box

trim removes the space above the first line or below the last line, so the text lines up with an icon or the edge of a card. Use start, end or both.

<Text as="p" size="3" trim="both">
  Your plan renews on 1 March.
</Text>

Styling another element

asChild puts Text's styles on its child, such as a time element.

<Text asChild size="1" emphasis="quiet">
  <time dateTime="2026-03-01">1 March</time>
</Text>

Props

Text also accepts every attribute of the element set by as.

Accessibility

• Element: A screen reader reads the element, not the look. Use as="p" for paragraphs, so people can move between them.
• Labels: as="label" with htmlFor names a form control and lets people click the label to focus it.
• Truncation: Truncated text is still read in full by a screen reader. A pointer user can't see the rest, so add a Tooltip or a title when the hidden part matters.
• Colour: Don't rely on colour alone to carry a meaning. Put the meaning in the words too, such as "Error:" or "Saved".