Alert

SAlert is a notification block with a semantic variant, a title and optional dismissal. The status icon is rendered with the reusable SIcon (composition instead of duplicated SVG).

Variants

Information

A regular informational message.

Done

Your changes have been saved.

Warning

Please check the data you entered.

Error

The operation could not be completed.

<template>
  <SAlert
    variant="positive"
    title="Done"
  >
    Your changes have been saved.
  </SAlert>
  <SAlert
    variant="negative"
    title="Error"
  >
    The operation could not be completed.
  </SAlert>
</template>

Closable

Tip

This notification can be closed.

<template>
  <SAlert
    variant="info"
    title="Tip"
    closable
    @close="visible = false"
  >
    This notification can be closed.
  </SAlert>
</template>

Custom icon

The icon prop overrides the icon assigned by the status variant — pass a registry name.

Note

The status icon is replaced with a custom one.

<template>
  <SAlert
    variant="positive"
    icon="info"
    title="Note"
  >
    The status icon is replaced with a custom one.
  </SAlert>
</template>

Title and icon slots

The icon and title slots replace the status icon and the title with your own markup (the icon slot takes precedence over the icon prop).

New notification N

The icon and title slots replace the icon and the title with your own markup.

<template>
  <SAlert variant="info">
    <template #icon>
      <SIcon
        icon="bell"
        :size="18"
      />
    </template>
    <template #title>New notification <SBadge>N</SBadge></template>
    The icon and title slots replace the icon and the title with your own markup.
  </SAlert>
</template>

Color

The color prop sets a color from the palette and overrides the variant color.

Indigo

A calm accent from the palette.

Blue-grey

A neutral bluish-gray accent.

<template>
  <SAlert
    variant="info"
    color="indigo"
    title="Indigo"
  >
    A calm accent.
  </SAlert>
</template>

API

Props

Name	Type	Default	Description
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides the variant color.
variant	| "info" | "positive" | "negative" | "warning"	"info"	Semantic variant: info/positive/warning/negative.
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
title	string	undefined	Title (can be replaced with the title slot).
closable	boolean	false	Shows the close button (emits close).
icon	string	undefined	Icon (a registry name or a raw SVG path). Overrides the variant's status icon; the icon slot takes precedence.
close-label	string	undefined	Accessible name of the close button (defaults to the locale dictionary).

Events

Name	Signature	Description
close	() => void	The close button was clicked.

Slots

Name	Description
default	Alert body.
title	Title (alternative to the title prop).
icon	Custom icon (replaces the status icon).