components
Badge
v.1.0.0 | SaturnImport
import { Badge } from '@kubit-ui-web/react-components'
123456789
<Badge variant="PRIMARY" size="DEFAULT" dot={{ variant: 'WITH_BORDER', size: 'MEDIUM', number: 8, maxNumber: 9 }} popover={{ variant: 'BADGE', content: 'Popover content' }} icon={{ icon: 'ICON_PLACEHOLDER' }} labelIcon={{ icon: 'ICON_CHEVRON_DOWN' }} label={{ content: 'Notifications' }} />
Props
Let's delve into the versatility of the confirmationMessage component by examining all its avalaible props.
Uncontrolled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Current variant of Badge |
size Required | String | - | Current size of Badge |
icon Required | IElementOrIcon | - | Main icon. |
popover Required | BadgePopoverType | - | Properties of Popover component. |
| dot | IDot | - | Properties of Dot component. |
| hasDot | Boolean | true | It shows or hides the dot. |
| label | BadgeLabelType | - | Label showed below the icon. |
| labelIcon | IElementOrIcon | - | Icon showed with the label. |
| ariaLiveText | String | - | Text that will be read by ScreenReader |
| aria-label | string | - | aria-label of the Badge |
| customDotTranslate | string | - | Value applied to the css 'transform' prop of the Dot |
| dataTestId | String | - | Id for testing |
| ctv | ConfirmationMessagePropsStateStylesType | - | Modify styles for the default version of the component |
| onClick | React.MouseEventHandler | - | OnClick callback applied to Badge |
Controlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Current variant of Badge |
size Required | String | - | Current size of Badge |
icon Required | IElementOrIcon | - | Main icon. |
popover Required | BadgePopoverType | - | Properties of Popover component. |
onClick Required | React.MouseEventHandler | - | OnClick function applied to Badge |
onBadgeBlur Required | React.FocusEventHandler | - | OnBlur function applied to Badge |
open Required | Boolean | - | It indicates if Badge is open or closed |
| dot | IDot | - | Properties of Dot component. |
| hasDot | Boolean | true | It shows or hides the dot. |
| label | BadgeLabelType | - | Label showed below the icon. |
| labelIcon | IElementOrIcon | - | Icon showed with the label. |
| ariaLiveText | String | - | Text that will be read by ScreenReader |
| aria-label | string | - | aria-label of the Badge |
| customDotTranslate | string | - | Value applied to the css 'transform' prop of the Dot |
| dataTestId | String | - | Id for testing |
| ctv | ConfirmationMessagePropsStateStylesType | - | Modify styles for the default version of the component |