The Text component renders text in a span tag, and can accept CSS properties both as direct props via system props or as properties provided via the sx prop.
Import
import {Text} from '@fuegokit/react'
Usage
By default, Text inherits the font-size property set by its parent.
System scale values and other CSS properties can be provided as direct props...
Systems props are deprecated. They should only be used in Fuegokit React's `Text` and `Box` components. Use a general rule, the sx prop when composing components Fuegokit React.
Use the sx prop with Fuegokit design tokens:
For a list of system values, refer to the Theme reference page.
The "as" prop
Text accepts a polymorphic as prop.
It should only be used in a way that accessibility will be improved by using the semantically appropriate HTML element consistent with the component's intended use.
Default heading styles are provided in the Heading component.
Why should I use a Text component?
Fuegokit React's Text component is meant to be used as a primitive to consume Fuegokit's design tokens, providing a balance between flexibility and constraints.
It can be used as a lower level API to implement your own components, as well as a general usage component:
- As a prototyping tool, it allows you to use Fuegokit's design tokens to rapidly generate new designs and evaluate whether you need to iterate on your foundations, or to validate if they work for your use cases.
- For general usage, you have the guarantee that users of the system won't do anything impossible (such as use a value that doesn't exist in
@fuegokit/tokens), while still having a productive experience working on the UI.
Props
Text
| Name | Type | Default | Description |
|---|---|---|---|
| ref | React.RefObject<HTMLDivElement> | A ref to the element rendered by this component. Because this component is polymorphic, the type will vary based on the value of the as prop. | |
| as | React.ElementType | "div" | The underlying element to render — either a HTML element name or a React component. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |