Alert

Feedback

Communicates status, warnings, or contextual information to the user.

Playground

Note

This is an informational message.

Controls

Variant

Visual severity.

Title

Optional bold heading.

Prop	Type	Default	Description
`variant`	`'default' \| 'info' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	Visual style and severity.
`title`	`string`	—	Optional heading inside the alert.

Info

Information

Your session will expire in 10 minutes.

vue

<DsAlert
  variant="info"
  title="Information"
>
  Your session will expire in 10 minutes.
</DsAlert>

Success

Saved

Your changes have been saved successfully.

vue

<DsAlert
  variant="success"
  title="Saved"
>
  Your changes have been saved successfully.
</DsAlert>

Warning

This action cannot be undone.

vue

<DsAlert
  variant="warning"
  title="Warning"
>
  This action cannot be undone.
</DsAlert>

Error

Something went wrong. Please try again.

vue

<DsAlert
  variant="destructive"
  title="Error"
>
  Something went wrong. Please try again.
</DsAlert>

Default

A simple neutral message.

vue

<DsAlert variant="default">
  A simple neutral message.
</DsAlert>

Use DsAlertSkeleton as a loading placeholder while content is being fetched.

With title

vue

<DsAlertSkeleton showTitle />

No title

vue

<DsAlertSkeleton :showTitle="false" />

TimePicker

AlertDialog