components
Snackbar
v.1.0.0 | Saturn
StorybookShort message that provide brief notification. The component is also known as toast.
<Snackbar
variant="DEFAULT"
title={{ content: 'Title' }}
description={{ content: 'Description' }}
open="true"
type="SUCCESS"
onOpenClose={() => null}
/>Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for quick use. Access them through the variant prop.
As the variant, type is a general prop por further customization of the component. This prop of the component allow to used several predefined styles depending on the objective of the communication.
<Snackbar variant="DEFAULT" title={{ content: 'Title' }} description={{ content: 'Description' }} open="true" type="ERROR" onOpenClose={() => null} /> <Snackbar variant="DEFAULT"
Usage
Simple
It is used to provide information without interactive elements.
<Snackbar
variant="DEFAULT"
title={{ content: 'Title' }}
description={{ content: 'Description' }}
open="true"
type="SUCCESS"
icon={{ icon: "ICON_CHECK_CIRCLE" }}
onOpenClose={() => null}
/>Complex
Usually used in task flows that needs interaction from the user. This props should be used in addition to the previuos ones:
- closeIcon: trigger element that will hide and show the content.
- link: element that trigger an action. For further information about this component check the props at the code api window.
<Snackbar
variant="DEFAULT"
title={{ content: 'Title' }}
description={{ content: 'Description' }}
open="true"
type="SUCCESS"
icon={{ icon: "ICON_CHECK_CIRCLE" }}
closeIcon={{ icon: 'ICON_X' }}
onOpenClose={() => null}
/>