Text

The Text component is a versatile text rendering component that provides consistent typography across your application. It inherits from the AnimatedBox component and adds text-specific styling capabilities.

Basic Usage


import { Text } from "@codedazur/fusion-ui";
 
function Example() {
  return <Text>Hello, world!</Text>;
}

Variants and Sizes

The Text component supports different variants and sizes:


<Text variant="display" size="large">Display Large</Text>
<Text variant="headline" size="medium">Headline Medium</Text>
<Text variant="title" size="large">Title Large</Text>
<Text variant="body" size="medium">Body Medium</Text>
<Text variant="label" size="small">Label Small</Text>

Semantic HTML Elements

You can render the Text component as different HTML elements:


<Text as="h1" variant="display" size="large">Heading 1</Text>
<Text as="h2" variant="headline" size="medium">Heading 2</Text>
<Text as="h3" variant="title" size="large">Heading 3</Text>
<Text as="p" variant="body" size="medium">Paragraph</Text>
<Text as="span" variant="label" size="small">Span</Text>

Text Styling

Apply additional styling through props:


<Text variant="title" size="medium" bold underline>
  Bold, underlined title
</Text>

Inherited Box Properties

Since Text inherits from AnimatedBox (which inherits from Box), you can use Box style props:


<Text
  margin={{ top: "300", bottom: "200" }}
  padding="300"
  background={{ color: "surface.base" }}
  border={{
    width: "200",
    color: "primary.base",
    radius: "300",
  }}
>
  Styled text using Box props
</Text>

Text Sprinkles

Apply text-related styling using the text sprinkles API:


<Text
  color="primary.base"
  weight="bold"
  align="center"
  lineHeight="tight"
  letterSpacing="wide"
>
  Custom styled text
</Text>

No Wrap (Truncation)

Prevent text wrapping and add ellipsis when content overflows:


<Text noWrap>
  This text will not wrap to a new line and will show an ellipsis if it's too
  long for its container.
</Text>

Responsive Styling

Apply different styles at different breakpoints:


<Text
  size={{ small: "small", medium: "medium", large: "large" }}
  color={{ small: "primary.base", large: "secondary.base" }}
  align={{ small: "start", medium: "center", large: "end" }}
>
  Responsive text
</Text>

Reference

Props

Text inherits all AnimatedBox props and adds the following:

Name	Type	Default	Description
`variant`	`'display'｜'headline'｜'title'｜'body'｜'label'`	`'body'`	Typography variant
`size`	`'small'｜'medium'｜'large'`	`'medium'`	Size within the variant
`bold`	`boolean`	`false`	Apply bold styling
`underline`	`boolean`	`false`	Apply underline styling
`noWrap`	`boolean`	`false`	Prevent wrapping with ellipsis overflow
`as`	`ElementType`	`'span'`	HTML element to render

Additionally, Text supports text sprinkle props:

font: Font family ("sans", "serif", etc.)
color: Token-based color values (e.g., "primary.base", "surface.onBase")
weight: Font weight ("regular", "medium", "bold")
lineHeight: Line height ("tight", "normal", "relaxed")
letterSpacing: Letter spacing ("tight", "normal", "wide")
align: Text alignment ("start", "center", "end", "justify", "justifyAll")