Go Main page
Go Main page

Web components

cover

components

Button

v.1.0.0 | Saturn

Usage

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.

PropertyTypeDefaultDescription
alignTextString-Align button text
childrenReactNode-Content
dataTestIdString-Testing id
disabledBooleanfalseSpecifies if the button element is disabled or not
ghostTextString-Ghost text of the button
iconIElementOrIcon-Icon
iconPositionIconPositionType-Icon position
loaderILoader or ReactNode-Set loader
loadingBooleanfalseIs fetching
formString-Form prop of the input
fullWidthBoolean-Show full width
minWidthString-Min width size
onClickMouseEventHandler-Event click
size
Required
String-Size
tabIndexNumber-To manage focus
typeStringbuttonButton type
variant
Required
String-Variant of button
aria-labelString-Aria label
aria-labelledbyString-Aria labelledby
aria-expandedBoolean-Aria label for expanded content
aria-controlsString-Aria label for associated list expanded content to button
aria-describedbyString-Aria id when button should read a text
aria-pressedString-Aria pressed
aria-disabledBoolean-Aria disabled
titleString-Title content
ctvButtonStateKeyOfType-Modify styles for the default version of the component
ctsButtonSizePropsType-Modify styles for the default version of the component