components
Text
v.1.0.0 | SaturnUsage
import { Text } from '@kubit-ui-web/react-components'
1
<Text>Text</Text>
Props
Let's delve into the versatility of the text component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
| align | String | - | Text align |
| - | String | - | Aria label of the text |
| - | String | - | Identifies the element (or elements) that labels the element it is applied to. |
| - | String | - | identifies the element (or elements) that describes the element on which the attribute is set |
| - | String | - | Indicates whether the element is exposed to an accessibility API. |
children Required | ReactNode | - | This will appear in your text |
| color | String | - | Color of the text |
| component | TextComponentType or GenericLinkType | - | Component type to transform text to |
| cursor | String | - | CSS cursor |
| customTypography | TypographyTypes | - | Apply TypographyTypes styles without the need to indicate variant or props to the text component |
| dataTestId | String | - | Test id |
| decoration | TextDecorationType | - | Include underline in text |
| display | TextDisplayType | - | Component display: placing |
| draggable | Boolean | - | Set the draggable attribute |
| htmlFor | String | - | Prop used when rendering a link |
| id | String | - | Prop used as an identifier |
| isDisabled | Boolean | - | It indicates if the component is disabled |
| role | AriaRole | - | Prop used for accesibility to asign a rol |
| target | String | - | Prop used when rendering a link to specifies target attribute |
| transform | TextTransformType | none | Text transform |
| url | String | - | Prop used when rendering a link to navigate to a url |
| variant | String | - | Variant to add Text styles |
| weight | Number | - | Font weight |
| onClick | MouseEventHandler | - | Function of the text when user click |
| ctv | TextVariantStylesType | - | Modify styles for the default version of the component |