Alert

An alert component to draw attention to important information.

Properties

Color, Variant, AppearanceOverride

Use the Color, Variant and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc, white. Available variants differ per color and can be viewed in the UI demo below.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color and Variant as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

solid

Code block has not loaded. An error may have occurred.

Title

The title of the alert.

Type

Code block has not loaded. An error may have occurred.

Description

The description of the alert.

Type

Code block has not loaded. An error may have occurred.

Icon

The icon to display on the left side of the alert.

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Slots

Slots allow you to customize specific aspects of the component completely, often replacing the old instances. Slots are passed parameters that allow the slot to interact with component data that is normally not exposed. Generally, an useColor (the function passed by theme:get()) function is passed as first parameter to allow the new components to use the same color as the parent component. When using slots, make sure to wrap any code that uses reactive values in a Computed (or any other classes that isolate state), to prevent unnecessary updates.

Title

The title of the alert. This will overwrite the existing title.

Function Type

Code block has not loaded. An error may have occurred.

Description

The description of the alert. This will overwrite the existing description.

Function Type

Code block has not loaded. An error may have occurred.

LeadingContent

Content to be placed before (left of) the title. This will overwrite the icon.

Function Type

Code block has not loaded. An error may have occurred.

TrailingContent

Content to be placed after (right of) the description.

This content tries to justify itself as far right as possible. It also takes priority over all other content, pushing the other content away so that it can fit.

Function Type

Code block has not loaded. An error may have occurred.

Usage

Code block has not loaded. An error may have occurred.

BottomContent

Content to be placed below the description.

Function Type

Code block has not loaded. An error may have occurred.

Usage

Code block has not loaded. An error may have occurred.

Theming

States

State	Description
Base

Colors

Color	Description
Background
Stroke
Title
Description