The `<Text />` component gives us a set of styling options for text based off the design system tokens.

```tsx live
<Text>Text</Text>
```

## Font size

We provide 4 font sizes that are suitable for body and component text. `standard` is the default font size when using the text component, and should always be your first weapon of choice.

```tsx live
<Flex flexDirection="column">
  <Text fontSize="xsmall">Extra small text size</Text>
  <Text fontSize="small">Small text size</Text>
  <Text>Standard text size (default)</Text>
  <Text fontSize="medium">Medium text size</Text>
</Flex>
```

### Larger font sizes

Use the larger text sizes for short text elements that need to stand out.

```tsx live
<Flex flexDirection="column">
  <Text fontSize="large">Large text</Text>
  <Text fontSize="xlarge">Extra large text</Text>
  <Text fontSize="xxlarge">Extra-extra large text</Text>
</Flex>
```

For example, you could reach for larger font sizes when you need to create "dashboard stat cards" and you want the numerical values to be prominent:

```tsx live
<Flex
  backgroundColor="neutral"
  borderColor="neutralSubtle"
  borderRadius="medium"
  borderStyle="solid"
  borderWidth="thin"
  boxShadow="small"
  flexDirection="column"
  gap="xxsmall"
  padding="medium"
  width={200}
>
  <SearchIcon color="neutralSubtle" />
  <Text fontSize="medium" fontWeight="medium" lineHeight="tight">
    Avg. searches
  </Text>
  <Text fontSize="xsmall" lineHeight="tight" color="neutralSubtle">
    per month
  </Text>

  <Flex flex={1} alignItems="center">
    <Text fontSize="large" fontWeight="bold">
      9
    </Text>
  </Flex>
</Flex>
```

### Headings

Headings have their own set of sizes, tied to their hierarchical levels. Go to [Heading](/packages/heading) to read more.

## Font weight

```tsx live
<Flex flexDirection="column">
  <Text>Regular font weight (default)</Text>
  <Text fontWeight="medium">Medium font weight</Text>
  <Text fontWeight="bold">Bold font weight</Text>
</Flex>
```

## Font family

We use a “system” font stack system for all components, which means that the font family will default to the font of the consumer’s operating system. For example, on MacOS it will default to `SF Pro`, and on Windows it will be `Segoe UI`.

This helps boost performance, as the client (the browser) doesn’t have to download any font files, but will use one it already has.

It also provides a comfortable look for the user, seeing they are already familiar with their OS.

For body and component text, we use a `sans` (sans-serif) system font stack as default, and for code examples, we use a `mono` (monospaced) system font stack.

```tsx live
<Flex flexDirection="column" gap="small">
  <Text>Text in sans-serif (default)</Text>
  <Text fontFamily="mono">Text in mono</Text>
</Flex>
```

## Line height

- `tight`
- `loose`
- `nospace`

```tsx live
<Flex flexDirection="column" gap="small">
  <Text maxWidth="500px" lineHeight="tight" fontSize="large">
    Lots of text with a tight line height. Great for larger text elements that can sometimes span across multiple lines.
  </Text>
  <Text maxWidth="500px" lineHeight="loose">
    Lots of text with a line height of loose. Default line height for body text and other longer chunks of text that
    usually span across multiple lines. Perfect for paragraphs in an article e.g.
  </Text>
  <Text maxWidth="500px" lineHeight="nospace">
    Lots of text with a line height of nospace. Use only for component text that you know will never wrap to multiple
    lines.
  </Text>
</Flex>
```

## Color

Use bold text colours for elements that need more prominence, and subtle text colours for elements that need less prominence.

```tsx live
<Flex flexDirection="column">
  <Text color="neutralSubtle">neutralSubtle</Text>

  <Text color="neutralBold">neutralBold</Text>

  <Box backgroundColor="neutralInverted">
    <Text color="neutralBoldInverted">neutralBoldInverted</Text>
  </Box>

  <Text color="positive">positive</Text>

  <Text color="informative">informative</Text>

  <Text color="caution">caution</Text>

  <Text color="critical">critical</Text>
</Flex>
```

## Empty text

When an `<Text />` component is rendered without children or undefined as children. A dash `-` is rendered to represent a lack of text.

This is often using when the text inside the Text component is conditional or is from a database where it might only optionally exist.

```tsx live
const [hasText, setHasText] = useState<boolean>(false);

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Flex gap="medium" flexWrap="wrap">
        <Toggle size="small" toggled={hasText} onClick={() => setHasText((prev: boolean) => !prev)} label="Has text" />
      </Flex>
    </PlaygroundCard>
    <Text>{hasText ? 'This is some text' : ''}</Text>
  </Flex>
);
```

## As

By default, it renders a `<span>`. You can render it with a different HTML element tag by using the `as` prop:

```tsx live
<Flex flexDirection="column" gap="large">
  <Text>Render as span (default)</Text>
  <Text as="p">Render as paragraph</Text>
  <Text as="div">Render as div</Text>
</Flex>
```

Text

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources