components
Button
v.1.0.0 | SaturnUsage
import { Button } from '@kubit-ui-web/react-components'
1
<Button variant="PRIMARY" size="MEDIUM">Button</Button>
Props
Let's delve into the versatility of the button component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
| alignText | String | - | Align button text |
| children | ReactNode | - | Content |
| dataTestId | String | - | Testing id |
| disabled | Boolean | false | Specifies if the button element is disabled or not |
| ghostText | String | - | Ghost text of the button |
| icon | IElementOrIcon | - | Icon |
| iconPosition | IconPositionType | - | Icon position |
| loader | ILoader or ReactNode | - | Set loader |
| loading | Boolean | false | Is fetching |
| form | String | - | Form prop of the input |
| fullWidth | Boolean | - | Show full width |
| minWidth | String | - | Min width size |
| onClick | MouseEventHandler | - | Event click |
size Required | String | - | Size |
| tabIndex | Number | - | To manage focus |
| type | String | button | Button type |
variant Required | String | - | Variant of button |
| aria-label | String | - | Aria label |
| aria-labelledby | String | - | Aria labelledby |
| aria-expanded | Boolean | - | Aria label for expanded content |
| aria-controls | String | - | Aria label for associated list expanded content to button |
| aria-describedby | String | - | Aria id when button should read a text |
| aria-pressed | String | - | Aria pressed |
| aria-disabled | Boolean | - | Aria disabled |
| title | String | - | Title content |
| ctv | ButtonStateKeyOfType | - | Modify styles for the default version of the component |
| cts | ButtonSizePropsType | - | Modify styles for the default version of the component |