Alert Avatar AvatarGroup Button ButtonGroup Checkbox CheckboxGroup FilePicker Form FormRow Hamburger Input Modal Option Radio RadioGroup Rating Select Spinner Textarea Toast Tooltip Toggle

Alert

Alerts can be used to provide user feedback for things like successful operations and errors. By default, alerts are displayed at full-width. Use bind:active two-way binding so that the parent template can trigger an alert and the alert’s close button can also close it. When using a scheme, an appropriate icon will be included when appropriate.

Example

The brand scheme will be used by default if no scheme or color is provided.

<script>
  import { Alert } from '$lib/ui';
</script>

<Alert>
  A default alert using neutral colors.
</Alert>

A default alert using neutral colors.

Color Schemes

Color schemes defined in style.css can be used to set the color and icon used for the alert.

<Alert scheme="info">
  This is just a simple info alert.
</Alert>

This is just a simple info alert.

<Alert scheme="warning">
  Warning! This alert is slightly scary.
</Alert>

Warning! This alert is slightly scary.

<Alert scheme="success">
  You have been alerted successfully.
</Alert>

You have been alerted successfully.

<Alert scheme="danger">
  Something bad happened.
</Alert>

Something bad happened.

No Icon

Icons can be disabled by setting the icon prop to “false” or any falsey value.

<Alert scheme="info" icon="false">
  Keepin' it simple.
</Alert>

Keepin' it simple.

Title Named Slot

A title can be added by using the title named slot.

<Alert scheme="warning">
  <span slot="title">Watch out!</span>
  This seems like a bad idea.
</Alert>

Watch out!

This seems like a bad idea.

Icon Named Slot

An icon can be added by using the icon named slot.

<Alert scheme="success">
  <IceCream slot="icon" size={26} />
  That ice cream was delicious.
</Alert>

That ice cream was delicious.

Alert Component Props

Name	Type	Default	Description
`active`	Boolean	`true`	Use with `bind:active` two-way binding so that the parent template can trigger an alert and the Alert's close button can also close it.
`icon`	String \| Boolean	`true`	Sets whether an icon is displayed for scheme which includes a default icon.
`scheme`	String: 'info', 'success', 'warning', 'danger'		Color/Icon scheme of alert to be displayed
`class`	String		CSS classes declared in global scope can be applied to the outermost element
`...`			Additional props will be passed through to the HTML element enabling support for things like `on:click`, etc

Alert CSS Custom Properties

Name	Type	Default	Description
`--ui-alert-color`	Color	`--ui-dark` or `#1e293b`	Color used for text and icons
`--ui-alert-background`	Color	`--ui-light` or `#e2e8f0`	Color used for Alert background
`--ui-alert-padding`	Padding shorthand	`12px`	Alert component padding shorthand value
`--ui-alert-gap`	Numeric	`8px`	Gap between icon and text
`--ui-alert-border-width`	Numeric	`0`	Alert component border width value
`--ui-alert-border-color`	Color	`none`	Alert component border width value
`--ui-alert-border-radius`	Numeric	`--ui-border-radius` or `3px`	Alert component border radius

Alert Named Slots

Name	Description
`title`	Content to be used as a title
`icon`	An icon component to replace the default icon