components
Media button
v.1.0.0 | SaturnUsage
import { MediaButton } from '@kubit-ui-web/react-components'
1
<MediaButton variant="DEFAULT" hasBackground="true" icon={{ icon: 'CLOSE', altText: 'First icon' }} size="LARGE" twistedIcon={{ icon: 'CARD', altText: 'Second icon' }} loader={{ altText: 'Loader' }} />Props
Let's delve into the versatility of the mediaButton component by examining its available props:
| Property | Type | Default | Description |
|---|---|---|---|
| aria-hidden | Boolean | False | Add aria hidden for button container |
| disabled | Boolean | False | Prop disable for button container |
| hasBackground | Boolean | - | Apply or not a background |
icon Required | IElementOrIcon | - | Icon showed |
| loader | ILoader | - | Loader showed when loading is true |
| loading | Boolean | - | Option to show the loader |
size Required | MediaButtonSizeType | - | MediaButton Icon size |
| tabIndex | Number | - | Tab index for button container |
| twisted | Boolean | - | When false shows icon, when true, twistedIcon |
| twistedIcon | IElementOrIcon | - | Icon to transition when you click on the main icon |
variant Required | String | - | MediaButton variant |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - | Function called when the image is clicked |
| ctv | Object | - | Object used for update variant styles |