Github

Alert

Alerts communicate important status messages and actions directly within a page.

Component variations

Color Variants

Contains: Primary, Success, Error, Warning, Info, Neutral. Primary is default

With Action Button

Alert with an action button

Without Close Button

Alert without a close button

Minimal Alert

Alert with only title, no action or close button

Custom Icon

Alert with a custom icon instead of default color-based icons

Usage Guidelines

Import

Import the alert component in your module or component:

import-alert.ts

Copy code

Basic Implementation

Here is a basic example of using the alert component:

alert-example.html

Copy code

Implementation with all available APIs

Here is an example of using the alert component with all available APIs:

alert-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
title
string
-
No
The title text displayed in the alert (optional)
description
string
-
Yes
The description or content text displayed in the alert (required)
color
'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'
'primary'
No
The color variant of the alert
action
boolean
true
No
Whether to show the action button
closable
boolean
true
No
Whether to show the close button
actionLabel
string
'Alert Action'
No
The text label for the action button
actionInline
boolean
false
No
Display action button inline with text container on the same line
icon
string
-
No
Custom icon name. If not provided, defaults to color-based icons

Outputs

Event
Type
Description
onClose
() => void
Callback function called when the close button is clicked
onAction
() => void
Callback function called when the action button is clicked

Best Practices

When to Use

  • Use Alert when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Alert when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use appropriate color variants to convey the message type (error, success, etc.)
  • Keep titles and descriptions concise and actionable
  • Use action buttons for alerts that require user interaction
  • Provide a close button for dismissible alerts
  • Place alerts prominently where users will see them
  • Use semantic colors: success for positive outcomes, error for failures, warning for caution, and info for informational messages
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

alert-usage.html

Copy code