Components

Alert

A message about something that happened or needs attention, with its kind, a title, actions and a way to dismiss it.

Usage

type picks the colour and the icon: info, success, warning or error. Alerts are tonal; any variant works. Put buttons in actions, and with closable the alert hides itself and sets open to false, so you can bind it and bring it back.

Statements for September are ready to download.

Transfer sent

$1,250.00 is on its way to Alex Morgan.

Your card expires next month.

Payment declined

The card ending 4471 was declined by the issuer.

Tip: press / to search your transactions.

Payment.svelte

<script>
  import { Alert, Button } from 'sveltier';
</script>

<Alert type="error" title="Payment declined">
  The card ending 4471 was declined by the issuer.
  {#snippet actions()}
    <Button size="sm" variant="tonal" color="error">Try another card</Button>
  {/snippet}
</Alert>

<Alert type="success" closable>Transfer sent.</Alert>

Accessibility

Warnings and errors have role="alert", read out as soon as they appear. Info and success messages have role="status", read when the screen reader is free.
The icon only repeats the type, so it is hidden from screen readers: say what happened in the text.
The close button is named by closeLabel, or "Close".

API

Name	Type	Default	Description
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`'tonal'`	Visual weight.
`color`	`Color`	`'info'`	The colour, when there is no `type` to take it from.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the padding.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`type`	`'info' \| 'success' \| 'warning' \| 'error'`	`–`	What kind of message: sets the colour and the icon. Warnings and errors are announced at once (`role="alert"`), the others politely (`role="status"`).
`title`	`string`	`–`	A short summary, above the text.
`icon`	`boolean`	`true`	Shows the icon of the `type`.
`open`	`boolean`	`true`	Shown while true; a closable alert sets it to false. Bindable.
`closable`	`boolean`	`false`	Adds a button that closes the alert and calls `onclose`.
`closeLabel`	`string`	`–`	The name of the close button. Defaults to the locale's `close`.
`onclose`	`() => void`	`–`	Called when the close button closes the alert.
`prepend`	`Snippet`	`–`	Content in place of the type's icon.
`actions`	`Snippet`	`–`	Buttons or links after the text, such as `Retry`.
`children`	`Snippet`	`–`	The message.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.