Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Snackbar

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the snackbar component is SNACKBAR_STYLES.

You cannot change the name of the tokens object.

Snackbar component has one way to modify the styles:

  • Variant: modify the styles of the Snackbar.

The structure of the SNACKBAR_STYLES object is:

Variants and Types

Each variant can have several types. types can modify the styles of the snackbar. The types are:

123456
enum SnackbarMessageType {
  ERROR
  WARNING
  INFORMATIVE
  SUCCESS
}

The tokens used are:

12345678910
const SNACKBAR_STYLES = {
  [VARIANT]: {
    [TYPE]: {
        actionButton?: {
          variant?: string;
          size?: string;
        };
        link?: {
          variant?: string;
          decoration?: TextDecorationType;

Example

snackbar theme object example:

12345678910
const SNACKBAR_STYLES = {
  [VARIANT]: {
    [TYPE]: {
      title: {
        font_variant: 'font-variant',
        font_weight: 'font-weight',
        text_align: 'text-align',
        color: 'color',
      },
      icon: {
SnackbarCode API
SnackbarAccessibility