Snackbar

5.1.15

Snackbars provide brief messages about app processes at the bottom of the screen.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

Namn	Typ	Beskrivning
action	`SnackbarAction`	The action to display. It renders after the message, at the end of the snackbar.
autoHideDuration	`number`	The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.
circleColor *	`BadgeColor`	Color of the status circle.
className	`string`	Optional CSS class name.
customAttribute	`{ attribute: string; value: string \| number }`	Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
text *	`string`	The text message to show.

Installation

npm install @sj-ab/component-library.ui.snackbar

Länkar

Tillgänglighet

Vi vet att Snackbar kan vara problematisk för vissa användare med funktionsnedsättning. Meddelandet i Snackbar visas bara under en kort tid och dyker upp i nederkant på skärmen. Det gör komponenten lätt att missa för synsvaga användare som använder förstoring.

Vi använder bara Snackbar för att ge extra bekräftelse på interaktion som användaren själv initierat, till exempel vid inloggning.
Vi använder aldrig Snackbar vid oförutsedda händelser, eller när det är väldigt viktigt att användaren uppfattar meddelandet.
Vi har inga länkar eller annan interaktion i Snackbar eftersom dessa blir svåra att komma åt med hjälpmedel.

WAI-ARIA

Snackbar använder WAI-ARIA-rollen role="alert" för att meddelandet ska läsas upp automatiskt för användare med skärmläsare när det dyker upp.

Change log

Statistik

Importer av Snackbar

Repos med Snackbar

28%

Senaste installerade version av Snackbar

3.3.11

Äldsta installerade version av Snackbar

1.0.52