Components
Snackbar
A brief message at the edge of the screen.
Snackbar shows a short message about an action the user took. SnackbarContent is the bar it shows; pass an Alert as the child to show a colored message instead.
import Snackbar from '@hone-ui/react/Snackbar';
import SnackbarContent from '@hone-ui/react/SnackbarContent';Examples
<SnackbarContent
message="Message archived"
action={
<Button color="inherit" size="small">
Undo
</Button>
}
/>Snackbar props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Shows it. |
onClose | (event, reason) => void | reason is timeout, clickaway or escapeKeyDown. | |
message, action | ReactNode | The content of the bar. | |
children | element | Replaces the bar, for example with an Alert. | |
autoHideDuration | number, null | null | Milliseconds before it asks to close. |
resumeHideDuration | number | half of autoHideDuration | Time left after the pointer or focus leaves. |
anchorOrigin | { vertical, horizontal } | { vertical: 'bottom', horizontal: 'left' } | Where it sits. |
disableWindowBlurListener | boolean | false | Keeps the timer running in a background window. |
ContentProps, slotProps.content | SnackbarContent props | Props for the bar. | |
sx, className, style, ref | Standard. |
SnackbarContent takes message, action and role ('alert').
Notes
- The timer pauses on hover, on focus and while the window is in the background.
TransitionComponent,TransitionPropsandClickAwayListenerPropsare not supported.
Accessibility
SnackbarContent has role="alert". Give users enough time to read, and don't time out a
message whose action they need.