Alert
A callout for displaying important information.
<script lang="ts">
import { Alert, AlertDescription, AlertTitle } from "coss-svelte";
</script>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>Describe what can be done about it here.</AlertDescription>
</Alert>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Alert, AlertAction, AlertDescription, AlertTitle } from "coss-svelte";Anatomy
- Alert
- AlertAction
- AlertDescription
- AlertTitle
API Reference
Alert
A callout for displaying important information.
children : Snippet<[]>Inherits from Svelte component attributes.
AlertAction
Renders the primary action for the parent component.
children : Snippet<[]>Inherits from Svelte <div> attributes.
AlertDescription
Provides supporting copy for the parent component.
children : Snippet<[]>Inherits from Svelte component attributes.
AlertTitle
Names the parent surface or section.
children : Snippet<[]>Inherits from Svelte component attributes.
Implementation Details
- Status
- Stable
- Foundation
- native
- Category
- Feedback & Status
- Particles
- 7