ComponentsAccordionAlert BannerAlert DialogButtonBreadcrumbsCalendarCheckboxConfirmation DialogData TableDialogDotsFormHover TriggerIconIconsImageInline Edit FieldListLoading ButtonMenuModalNagivation BarPassword FieldPopoverProgress BarProgress CircleRadio GroupSearch FieldSelectSide NavigationSliderSpinnerStatus LightSwitchTableTabsText FieldTheme ButtonToastToggleToggle GroupTooltip
Typography
Text
A text element with controls for size, color, weight and letter spacing.
Here is some text.
Colors
Normal textMuted textDisabled textColored text
Sizes
Size 1Size 2Size 3Size 4Size 5Size 6Size 7Size 8Size 9Size 10Size 11Size 12
Weights
Light textNormal textMedium textBold text
Alignment
Left
Center
Right
Letter spacing
Letter spacing 1Letter spacing 2Letter spacing 3 (normal)Letter spacing 4Letter spacing 5
Transform
CapitalizeUppercaseLowercase
Truncate
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
Component props
| Name | Type |
|---|---|
| type | Responsive<"muted" | "faded"> |
| size | Responsive<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"> |
| weight | Responsive<"light" | "regular" | "medium" | "bold"> |
| align | Responsive<"left" | "center" | "right"> |
| spacing | Responsive<"1" | "2" | "3" | "4" | "5"> |
| as | string |
| asChild | boolean |