The toujou snackbar element is a way to provide brief messages / acknowledgements to the user.
It may or may not require an action from the user.
We can customize the toujou-snackbar
type ('auto' or 'action'), message, duration and button properties, and use it with one of the available variants (default
. success
, warning
, error
, info
).
npm install @toujou/toujou-snackbar
The toujou-snackbar element is triggered via the add-snackbar
custom event (which can be dispatch by any other elements).
The add-snackbar
event needs:
Property | Type | Description | Accepted Values | Default | Required by |
---|---|---|---|---|---|
message |
String | Text that will be displayed in the snackbar | - | - | Always |
type |
String | This defines if the snackbar needs action from the user of if is temporary | 'action', 'auto' | - | always |
buttonText |
String | Defines the text on the button | - | 'OK' | action' |
duration |
Number | Number of milliseconds to show the snackbar | - | 3000 | 'auto' |
variant |
String | Name of variant to use | 'success', 'warning', 'error', 'info' | - | - |
'Auto' Snackbars are dismissed automatically after a certain amount of time. The suggested values are between 3 and 10 seconds.
const addSnackbarEvent = new CustomEvent('add-snackbar', {
bubbles: true,
composed: true,
detail: {
message: `welcome to the bonus page!`,
type: 'auto',
duration: 4000,
variant: 'success'
}
})
'Action' Snackbars are not dismissed automatically. The user needs to take action to dismiss them.
const addSnackbarEvent = new CustomEvent('add-snackbar', {
bubbles: true,
composed: true,
detail: {
message: `Settings saved!`,
type: 'action',
buttonText: 'Dismiss'
}
})
We can style the toujou-snackbar element by using custom css properties
Style the toujou-snackbar
element:
Property | Description | Default |
---|---|---|
--toujou-snackbar-bg-color | Set background-color of the element |
#2c2c2c |
--toujou-snackbar-border | Set border of the element |
1px solid --bg-color |
--toujou-snackbar-display | Set display of the element |
flex |
--toujou-snackbar-width | Set width of the element |
calc(100% - 2rem) |
--toujou-snackbar-max-width | Set max-width of the element |
640px |
--toujou-snackbar-position | Set position of the element |
fixed |
--toujou-snackbar-bottom | Set bottom of the element |
1rem |
--toujou-snackbar-left | Set left of the element |
1rem |
--toujou-snackbar-padding | Set padding of the element |
1rem |
--toujou-snackbar-border-radius | Set border-radius of the element |
.25rem |
--toujou-snackbar-z-index | Set z-index of the element |
100 |
--toujou-snackbar-transform | Set transform of the element |
translateY(calc(100% - 1rem)) |
--toujou-snackbar-opacity | Set opacity of the element |
0 |
--toujou-snackbar-transition | Set transition of the element |
all .25s ease-out |
Style the toujou-snackbar[visible]
:
Property | Description | Default |
---|---|---|
--toujou-snackbar-visible-transform | Set transform of the element with visible attribute |
translateY(0) |
--toujou-snackbar-visible-opacity | Set opacity of the element with visible attribute |
1 |
Style the .snackbar__message
inside the toujou-snackbar
element
Property | Description | Default |
---|---|---|
--toujou-snackbar-message-grow | Set flex-grow of the .snackbar__message
|
1 |
--toujou-snackbar-message-color | Set color of the .snackbar__message
|
white |
--toujou-snackbar-message-margin | Set margin of the .snackbar__message
|
0 |
--toujou-snackbar-message-padding | Set padding of the .snackbar__message
|
0 1rem 0 0 |
Style the .snackbar__button
inside the toujou-snackbar
element
Property | Description | Default |
---|---|---|
--toujou-snackbar-button-border | Set border of the .snackbar__button
|
none |
--toujou-snackbar-button-bg | Set background of the .snackbar__button
|
none |
--toujou-snackbar-button-font-size | Set font-size of the .snackbar__button
|
.875rem |
--toujou-snackbar-button-text-transform | Set text-transform of the .snackbar__button
|
uppercase |
--toujou-snackbar-button-color | Set color of the .snackbar__button
|
--primary-color |
--toujou-snackbar-button-margin | Set margin of the .snackbar__button
|
0 |
--toujou-snackbar-button-outline | Set outline of the .snackbar__button
|
none |
Style the .snackbar__button:hover
inside the toujou-snackbar
element
Property | Description | Default |
---|---|---|
--toujou-snackbar-button-hover-cursor | Set cursor of the .snackbar__button:hover
|
pointer |
--toujou-snackbar-button-hover-opacity | Set opacity of the .snackbar__button:hover
|
.75 |
The toujou-snackbar
element has 5 variants: default
, success
, warning
, error
and info
.
To choose the variant you want to use you just need to add the variant
property to the add-snackbar
custom event.
If there is no variant
property, the default
variant will be used.
You can also customize some variant styles using custom CSS variables.
Should be used to show a success message to the user, for instance a 'successfully saved' message.
Property | Description | Default |
---|---|---|
--toujou-snackbar-success-border | Set border of the toujou-snackbar[success]
|
1px solid --success-color |
--toujou-snackbar-success-message-color | Set color of the toujou-snackbar[success] .snackbar__message
|
--success-color |
--toujou-snackbar-success-button-color | Set color of the toujou-snackbar[success] .snackbar__button
|
white |
Should be used to show a warning message to the user, for instance a 'your consent expires tomorrow' message
Property | Description | Default |
---|---|---|
--toujou-snackbar-warning-border | Set border of the toujou-snackbar[warning]
|
1px solid --warning-color |
--toujou-snackbar-warning-message-color | Set color of the toujou-snackbar[warning] .snackbar__message
|
--warning-color |
--toujou-snackbar-warning-button-color | Set color of the toujou-snackbar[warning] .snackbar__button
|
white |
Should be used to show an error message to the user, for instance 'there was an error while saving your settings' message
Property | Description | Default |
---|---|---|
--toujou-snackbar-error-border | Set border of the toujou-snackbar[error]
|
1px solid --error-color |
--toujou-snackbar-error-message-color | Set color of the toujou-snackbar[error] .snackbar__message
|
--error-color |
--toujou-snackbar-error-button-color | Set color of the toujou-snackbar[error] .snackbar__button
|
white |
Should be used to show an information message to the user, for instance 'there is a new update available'
Property | Description | Default |
---|---|---|
--toujou-snackbar-info-border | Set border of the toujou-snackbar[info]
|
1px solid #81d4fa |
--toujou-snackbar-info-message-color | Set color of the toujou-snackbar[info] .snackbar__message
|
#81d4fa |
--toujou-snackbar-info-button-color | Set color of the toujou-snackbar[info] .snackbar__button
|
white |