
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 |