Components

Alert

An alert component to display contextual information to users that supports multiple appearances, icons, and custom styles.

Usage

The Alert component is utilized to draw the attention of the user. The Alert is commonly utilized to display informational message throughout the Portal for tips, warnings, or other contextual information.

Each Alert instance is pre-configured with styles based on the default appearance value, and can be customized per-instance, or wrapped in a Snippet for easy reusability.

Attention please

Alerts are easy to use!

::alert
---
appearance: "success"
show-icon: true
title: "Attention please"
message: "Alerts are easy to use!"
---
::
Alert Component Props

The appearance variant of the alert. One of 'info', 'success', 'danger', 'warning'. Defaults to 'info'.

Display the alert's built-in icon. Defaults to `false`.

The title to display in the alert.

The message to display in the alert.

The background of the component. Accepts string.

The background color of the component. Accepts string | null.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The text color of the element. Accepts string.

The margin of the component. Accepts string | null.

The padding of the component. Accepts string | null.

Props

appearance

The Alert component can take 1 of 5 appearance values to change its overall theming:

  • Type: 'info' | 'success' | 'warning' | 'danger'
  • Default: 'info'

You can change the theme by updating the appearance.

::alert
---
message: "You can change the theme by updating the appearance."
appearance: "info"
---
::
Alert Component Props

The appearance variant of the alert. One of 'info', 'success', 'danger', 'warning'. Defaults to 'info'.

title

Optionally provide an Alert title to display above the message content.

  • Type: string
  • Default: ''
Look Here!

This alert even has a title above the message.

::alert
---
appearance: "success"
message: "This alert even has a title above the message."
title: "Look Here!"
---
::
Alert Component Props

The title to display in the alert.

message

The Alert message text.

If providing message content other than plain text such as formatted markdown, you should utilize the default slot to provide the message content.

  • Type: string
  • Default: ''

You can use plain text in the message prop. For markdown and other content, use the default slot.

::alert
---
appearance: "success"
message: "You can use plain text in the message prop. For markdown and other content, use the default slot."
---
::
Alert Component Props

The message to display in the alert.

showIcon

Each Alert appearance comes with a corresponding default icon. Set this prop to true in order to display the icon.

You can also provide a custom icon through the icon slot.

  • Type: boolean
  • Default: false

You can display an icon to the left.

::alert
---
message: "You can display an icon to the left."
show-icon: true
appearance: "success"
---
::
Alert Component Props

Display the alert's built-in icon. Defaults to `false`.

The appearance variant of the alert. One of 'info', 'success', 'danger', 'warning'. Defaults to 'info'.

Shared Props

This component also includes the shared props listed below:

The local shared prop default values are shown below. The Alert component inherits internal styles based on its appearance variant.
  • background - default is null
  • backgroundColor - default is null
  • border - default is null
  • borderRadius - default is null
  • color - default is null
  • margin - default is 20px 0
  • padding - default is null
  • styles - default is ''

See here for more information on shared props.

Slots

default

Use the #default slot to add alert message content such as formatted markdown. When the slot content is provided, it takes precedence over the message prop.

icon

Provide a custom icon to display to the left of the Alert message.