Display and feedback

Alert

Info, success, warning, and danger callout.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Alert } from "@cofob/design-system-react";

/**
 * Complete Alert parameter reference.
 * @param tone
 *   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
 *   default: "info"
 *   example: "success"
 * @param title
 *   type: string | renderable content
 *   default: —
 *   example: "No posts yet"
 * @param icon
 *   type: LucideIcon (React) | Snippet (Svelte)
 *   default: —
 *   example: Inbox / icon snippet
 * @param dismissLabel
 *   type: string
 *   default: "Dismiss"
 *   example: "Accessible label"
 * @param onDismiss
 *   type: () => void
 *   default: —
 *   example: {handleDismiss}
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AlertExample() {
  return (
    <Alert>Content</Alert>
  );
}

Svelte

<script lang="ts">
  import { Alert } from "@cofob/design-system-svelte";

  // Complete Alert parameter reference.
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "info"
  //   example: "success"
  // title
  //   type: string | renderable content
  //   default: —
  //   example: "No posts yet"
  // icon
  //   type: LucideIcon (React) | Snippet (Svelte)
  //   default: —
  //   example: Inbox / icon snippet
  // dismissible
  //   type: boolean (Svelte)
  //   default: false
  //   example: true
  // dismissLabel
  //   type: string
  //   default: "Dismiss"
  //   example: "Accessible label"
  // onDismiss
  //   type: () => void
  //   default: —
  //   example: {handleDismiss}
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Alert>Content</Alert>

HTML

<!--
  Complete Alert parameter reference.
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "info"
    example: "success"
  title
    type: string | renderable content
    default: —
    example: "No posts yet"
  icon
    type: LucideIcon (React) | Snippet (Svelte)
    default: —
    example: Inbox / icon snippet
  dismissible
    type: boolean (Svelte)
    default: false
    example: true
  dismissLabel
    type: string
    default: "Dismiss"
    example: "Accessible label"
  onDismiss
    type: () => void
    default: —
    example: {handleDismiss}
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<aside class="cf-alert" data-tone="info">Message</aside>

Contract

CSS selector	`.cf-alert`
Adapters	Native · React · Svelte
Primary props	tone · title · icon · dismissible · dismissLabel · onDismiss · children · div attributes
Documented states	info · success · warning · danger · dismissible
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`tone`	`"neutral" \| "accent" \| "info" \| "success" \| "warning" \| "danger"`	`"info"`	React · Svelte · HTML	`"success"`	Applies semantic color intent without hard-coded colors.
`title`	`string \| renderable content`	`—`	React · Svelte · HTML	`"No posts yet"`	Primary heading or accessible title.
`icon`	`LucideIcon (React) \| Snippet (Svelte)`	`—`	React · Svelte · HTML	`Inbox / icon snippet`	Overrides the default semantic icon.
`dismissible`	`boolean (Svelte)`	`false`	Svelte · HTML	`true`	Shows the Svelte alert dismiss action.
`dismissLabel`	`string`	`"Dismiss"`	React · Svelte · HTML	`"Accessible label"`	Accessible name for a dismiss or close action.
`onDismiss`	`() => void`	`—`	React · Svelte · HTML	`{handleDismiss}`	Runs after a dismiss action is activated.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.