
components
Snackbar
v.1.0.0 | SaturnImport
1
import { Snackbar } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the snackbar component by examining all its avalaible props.
Uncontrolled
Property | Type | Default | Description |
---|---|---|---|
variant Required | String | - | Variant of Snackbar |
type Required | SnackbarMessageType | - | Type of Snackbar |
closeTimeout | Number | - | Close timeout of Snackbar |
icon | IElementOrIcon | - | Icon used on the left side of the snackbar |
closeIcon | IElementOrIcon | - | Icon used on the right side to close the snackbar |
open | Boolean | false | When controlled, Toggles the snackbar open/close state |
title Required | SnackbarTitleType | - | Snackbar text content |
description | SnackbarDescriptionType | - | Description of the snackbar, located between the title and the link |
secondaryActionLink | SnackbarLinkType | - | Link of the snackbar |
secondaryActionButton | SnackbarActionButtonType | - | Action button of the snackbar |
secondaryActionContent | String | - | Text for secondary action link or secondary action button |
secondaryActionAriaLabel | String | - | Aria label for secondary action link or secondary action button |
onSecondaryActionClick | (open: boolean) => void | - | On click funtion applied to secondary action link or secondary action button |
align | POSITIONS | TOP_CENTER_FIXED | Variant for snackbar styling |
dataTestId | String | - | Test id of the component. Internal components will concatenate from this test id |
onOpenClose | (open: boolean) => void | - | Callback called when the snackbar is opened or closed |
onMouseEnter | MouseEventHandler | - | Associated to onMouseEnter event from snackbar |
onMouseLeave | MouseEventHandler | - | Associated to onMouseLeave event from snackbar |
onFocus | FocusEventHandler | - | Associated to onFocus event from snackbar |
onBlur | FocusEventHandler | - | Associated to onBlur event from snackbar |
ctv | SnakbarTypeStyleProps | - | Modify styles for the default version of the component |
Controlled
Property | Type | Default | Description |
---|---|---|---|
variant Required | String | - | Variant of Snackbar |
type Required | SnackbarMessageType | - | Type of Snackbar |
closeTimeout | Number | - | Close timeout of Snackbar |
icon | IElementOrIcon | - | Icon used on the left side of the snackbar |
closeIcon | IElementOrIcon | - | Icon used on the right side to close the snackbar |
open | Boolean | false | When controlled, Toggles the snackbar open/close state |
title Required | SnackbarTitleType | - | Snackbar text content |
description | SnackbarDescriptionType | - | Description of the snackbar, located between the title and the link |
secondaryActionLink | SnackbarLinkType | - | Link of the snackbar |
secondaryActionButton | SnackbarActionButtonType | - | Action button of the snackbar |
secondaryActionContent | String | - | Text for secondary action link or secondary action button |
secondaryActionAriaLabel | String | - | Aria label for secondary action link or secondary action button |
onSecondaryActionClick | (open: boolean) => void | - | On click funtion applied to secondary action link or secondary action button |
align | POSITIONS | TOP_CENTER_FIXED | Variant for snackbar styling |
dataTestId | String | - | Test id of the component. Internal components will concatenate from this test id |
onOpenClose | (open: boolean) => void | - | Callback called when the snackbar is opened or closed |
onMouseEnter | MouseEventHandler | - | Associated to onMouseEnter event from snackbar |
onMouseLeave | MouseEventHandler | - | Associated to onMouseLeave event from snackbar |
onFocus | FocusEventHandler | - | Associated to onFocus event from snackbar |
onBlur | FocusEventHandler | - | Associated to onBlur event from snackbar |
onCloseButtonClick Required | (open: boolean) => React.MouseEventHandler | - | Function associated to close icon click |
ctv | SnakbarTypeStyleProps | - | Modify styles for the default version of the component |