Alert — Selaras

Usage

Heads up

This changes how the export command behaves - check the migration notes before upgrading.

vue-html

<SAlert
  color="info"
  title="Heads up"
  description="This changes how the export command behaves - check the migration notes before upgrading."
/>

Variant

variant picks between soft (default), outline, and solid:

Payment received

Your subscription is now active.

Payment received

Your subscription is now active.

Payment received

Your subscription is now active.

vue-html

<SAlert color="success" variant="outline" title="Payment received" description="Your subscription is now active." />

color accepts any registered semantic role. The four built-in feedback intents - success, danger, warning, and info - each select a matching default icon. Other roles still control the visual recipe, but do not guess an icon; set icon explicitly when that role needs one. A default icon only renders once color is supplied, so an SAlert with neither renders no icon:

Success

Your changes have been saved.

Error

Something went wrong while saving.

Warning

This action can't be undone.

Note

This feature is still in beta.

vue-html

<SAlert color="danger" title="Error" description="Something went wrong while saving." />

Closable

closable shows a dismiss button and emits close when clicked - the alert has no open state of its own, so hiding it is up to your own v-if, the same way Chip's own removable works:

Unsaved changes

Leaving this page will discard your edits.

vue-html

<SAlert v-if="visible" title="Unsaved changes" closable @close="visible = false" />

With actions

The actions slot renders buttons below the description:

Upload failed

The file couldn't be uploaded - check your connection and try again.

vue-html

<SAlert color="danger" title="Upload failed" description="Check your connection and try again.">
  <template #actions>
    <SButton size="sm" color="danger">Retry</SButton>
    <SButton size="sm" variant="ghost" color="neutral">Dismiss</SButton>
  </template>
</SAlert>

Props

Prop	Type	Default
`title`	`string`	-
`description`	`string`	-
`icon`	`string`	-
`closable`	`boolean`	`false`
`color`	`ColorRole`	`info`
`variant`	`'solid' \| 'soft' \| 'outline'`	`soft`
`ui`	`Partial<Record<AlertSlot, string \| object>>`	-

Events

Event	Payload	Description
`close`	-	Fires when the dismiss button is clicked

Slots

Slot	Props	Description
`title`	-	Replaces the title text
`description`	-	Replaces the description text
`actions`	-	Action buttons below the description

Edit this page