Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Typography and styling abstraction component used to ensure consistency and standardize text throughout your application.
as
prop to give the text a semantic meaning. By deafult, the Text component will result in a span
element.Name | Description | Default | Control |
---|---|---|---|
as | "h1""h2""h3""h4""h5""h6""p""pre" | - | |
wrap | Wraps the text content on white spaces. boolean | - | |
truncate | Truncate overflowing text for block displays. boolean | - | |
block | Applies a block display for the content. boolean | - | |
italic | Applies the italic font style to the content. boolean | - | |
underline | Applies the underline text decoration to the content. boolean | - | |
strikethrough | Applies the strikethrough text decoration to the content. boolean | - | |
size | Applies font size and line height based on the theme tokens. 100200300400500600700800 | - | |
font | Applies the font family to the content. "base""numeric""monospace" | - | |
weight | Applies font weight to the content. "medium""regular""semibold" | - | |
align | Aligns text based on the parent container. "start""end""center""justify" | - |
Different typography components can be used that are based on the Text
components.
They all share the same props and behaviours that are documented here.