# Text (/components/typography/text)
`Text` applies Luke UI typography without adding heading semantics. It needs a Luke UI theme root.
See [Getting started](/docs/installation).
apps/docs/src/examples/text/basic.tsx
```tsx
import { Text } from '@luke-ui/react/text';
export default () => {
return The quick brown fox jumps over the lazy dog.;
};
```
## Element type [#element-type]
`Text` renders React Aria's `Text` component, which uses a `span` by default. Set `elementType` to
choose a semantic element without changing the type treatment. `Text` trims Capsize space on known
block elements such as `p`, `div`, headings, and `blockquote`, and skips it for inline or unknown
element types.
```tsx
A paragraph of supporting copy.
Email address
```
## Typography [#typography]
Pass `typography` to choose a style. `body` is the default. See [Typography](/docs/typography) for
the full style reference.
apps/docs/src/examples/text/lead.tsx
```tsx
import { Text } from '@luke-ui/react/text';
export default () => {
return Lead text sits at a larger size than body text.;
};
```
Set `fontWeight` only when you need to override the style's weight. Themes expose `body`, `label`,
`heading`, and `emphasis` roles for that purpose.
## Alignment [#alignment]
Set `textAlign` when the layout needs a different inline alignment.
apps/docs/src/examples/text/alignment.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
import { vars } from '@luke-ui/react/theme';
const rowStyle = {
backgroundColor: vars.color.background.neutral.subtle.rest,
} as const;
export default () => {
return (
Start aligned
Centre aligned
End aligned
);
};
```
## Numeric glyphs [#numeric-glyphs]
Use `fontVariantNumeric` to align numeric columns, format fractions and ordinals, or distinguish
zero with a slash.
apps/docs/src/examples/text/numeric-glyphs.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
const variants = [
{ label: 'Tabular', sample: '111,111 888,888', value: 'tabular-nums' },
{ label: 'Fractions', sample: '1/2 3/4 5/6', value: 'diagonal-fractions' },
{ label: 'Ordinals', sample: '1st 2nd 3rd 4th', value: 'ordinal' },
{ label: 'Slashed zero', sample: '012 OQR', value: 'slashed-zero' },
] as const;
export default () => {
return (
{variants.map((variant) => (
{variant.label}
{variant.sample}
))}
);
};
```
## Trimming [#trimming]
Block text trims space above capitals and below the baseline by default. That makes vertical spacing
more predictable in cards and other bounded layouts. Inline text skips trim so its pseudo-elements
cannot interrupt the surrounding line. Set `shouldDisableTrim` explicitly when you need to override
the element-type inference.
apps/docs/src/examples/text/trim.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Checkbox } from '@luke-ui/react/checkbox';
import { Text } from '@luke-ui/react/text';
import { vars } from '@luke-ui/react/theme';
import { useState } from 'react';
const lineBoxStyle = {
backgroundColor: vars.color.surface.recessed,
borderBlock: `1px dashed ${vars.color.border.decorative}`,
} as const;
export default () => {
const [isTrimmed, setIsTrimmed] = useState(true);
return (
Trim text
Aa
);
};
```
## Truncation [#truncation]
Use `lineClamp` to constrain text to one line or up to five lines. `Text` truncates overflow with an
ellipsis. It disables trimming automatically when you set `lineClamp`.
apps/docs/src/examples/text/truncation.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Short lines are easier to scan than long ones, which is why well-set text rarely stretches
edge to edge on a wide screen, no matter how much room is available.
Short lines are easier to scan than long ones, which is why well-set text rarely stretches
edge to edge on a wide screen, no matter how much room is available.
);
};
```
## Transform and decoration [#transform-and-decoration]
Use `textTransform` and `textDecoration` when the content calls for them. These props affect the
rendered text only, so avoid using uppercase styling as a substitute for a clear label.
apps/docs/src/examples/text/transform.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Uppercase text
Underlined text
);
};
```
## Related components [#related-components]
Use [Heading](/components/typography/heading) for a section heading. It manages heading levels for
you. Use `Text` with a larger style such as `display` or `heading1` for prominent content that is
not a heading. A large status value is one example.
Use [Numeral](/components/typography/numeral) to format locale-aware numbers and
[Emoji](/components/typography/emoji) for an emoji with a reliable accessible label.
## API [#api]