Go Main page
Go Main page

Web components

cover

components

Snackbar

v.1.0.0 | Saturn

Import

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

PropertyTypeDefaultDescription
variant
Required
String-Variant of Snackbar
type
Required
SnackbarMessageType-Type of Snackbar
closeTimeoutNumber-Close timeout of Snackbar
iconIElementOrIcon-Icon used on the left side of the snackbar
closeIconIElementOrIcon-Icon used on the right side to close the snackbar
openBooleanfalseWhen controlled, Toggles the snackbar open/close state
title
Required
SnackbarTitleType-Snackbar text content
descriptionSnackbarDescriptionType-Description of the snackbar, located between the title and the link
secondaryActionLinkSnackbarLinkType-Link of the snackbar
secondaryActionButtonSnackbarActionButtonType-Action button of the snackbar
secondaryActionContentString-Text for secondary action link or secondary action button
secondaryActionAriaLabelString-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
alignPOSITIONSTOP_CENTER_FIXEDVariant for snackbar styling
dataTestIdString-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
onMouseEnterMouseEventHandler-Associated to onMouseEnter event from snackbar
onMouseLeaveMouseEventHandler-Associated to onMouseLeave event from snackbar
onFocusFocusEventHandler-Associated to onFocus event from snackbar
onBlurFocusEventHandler-Associated to onBlur event from snackbar
ctvSnakbarTypeStyleProps-Modify styles for the default version of the component

Controlled

PropertyTypeDefaultDescription
variant
Required
String-Variant of Snackbar
type
Required
SnackbarMessageType-Type of Snackbar
closeTimeoutNumber-Close timeout of Snackbar
iconIElementOrIcon-Icon used on the left side of the snackbar
closeIconIElementOrIcon-Icon used on the right side to close the snackbar
openBooleanfalseWhen controlled, Toggles the snackbar open/close state
title
Required
SnackbarTitleType-Snackbar text content
descriptionSnackbarDescriptionType-Description of the snackbar, located between the title and the link
secondaryActionLinkSnackbarLinkType-Link of the snackbar
secondaryActionButtonSnackbarActionButtonType-Action button of the snackbar
secondaryActionContentString-Text for secondary action link or secondary action button
secondaryActionAriaLabelString-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
alignPOSITIONSTOP_CENTER_FIXEDVariant for snackbar styling
dataTestIdString-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
onMouseEnterMouseEventHandler-Associated to onMouseEnter event from snackbar
onMouseLeaveMouseEventHandler-Associated to onMouseLeave event from snackbar
onFocusFocusEventHandler-Associated to onFocus event from snackbar
onBlurFocusEventHandler-Associated to onBlur event from snackbar
onCloseButtonClick
Required
(open: boolean) => React.MouseEventHandler-Function associated to close icon click
ctvSnakbarTypeStyleProps-Modify styles for the default version of the component