dialogs

Snackbar

Highlight prominent messages

Features

Keyboard accessible
Customizable icon
Multiple levels of severity
Themes ready

Links

Open in playground Open in Storybook View source ARIA design

The Relevance section uses only Feedback with that can be analysed with NLP and have a score. Learn more

Anatomy

import { Snackbar } from "@wonderflow/react-components";

export default () => {
  return <Snackbar>...</Snackbar>;
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

icon

enum

title

string

kind

enum

neutral

dismissable

boolean

dismissLabel

string

Dismiss

onDismiss

function

as

enum

output

Accessibility

Adheres to the status role requirements.

The Snackbar component uses the element output by default with inplicits aria-live="polite" and aria-atomic="true" attributes. Add those to change the default values.

Keyboard interactions

Name	Description
`tab`	Move focus on the first focusable element inside