Alert
A component for displaying important messages or notifications.
Usage
<script>
import {Alert} from 'ui-ingredients';
import {AlertCircleIcon} from '$lib/icons';
</script>
<Alert.Root>
<Alert.Indicator>
<AlertCircleIcon />
</Alert.Indicator>
<Alert.Title>Title</Alert.Title>
<Alert.Description>Description</Alert.Description>
</Alert.Root>
API Reference
Root
| Prop | Default | Description |
|---|
id | | string |
ids | | {
root?: string;
title?: string;
description?: string;
indicator?: string;
} |
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | "root" |
data-scope | "accordion" |
Description
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | description |
data-scope | alert |
Indicator
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | indicator |
data-scope | alert |
Title
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | title |
data-scope | alert |