`<c-alert>`

A persistent, in-flow status message: a tinted box whose type carries a status family's colours through the icon, heading and accent edge, while the body copy stays neutral.

Usage

Give the alert a heading with the prop for plain text; the heading slot overrides the prop when rich content (links, emphasis) is needed. The message goes in the default slot.

When to use

Persistent status that belongs to the page or a section: a maintenance notice, a failed validation summary, a quota warning.
Not for transient feedback on an action — use c-toasts, which overlays and dismisses itself; the alert stays in the layout until the consumer removes it.

Types

The four status types (error, info, success, warning) carry their status family's colours and icon; default — equivalently, omitting the attribute — renders the brand-primary look. Severity is signalled by the icon, the heading's ink and the accent edge, never by colouring the body text.

Dismissal

dismissible renders a dismiss button, but pressing it only emits the dismiss event — removing the alert from the page stays the consumer's job.

Accessibility

The alert manages its own live-region role: warning and error interrupt (role="alert"), while the other types announce politely (role="status"). Content that is present at page load is not announced — live regions only announce changes.

Customization

Structural styling via ::part(root), ::part(icon), ::part(content), ::part(heading) and ::part(dismiss). Colours come from the status-family semantic tokens; override the tokens to re-theme.

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-alert heading="Maintenance break" type="warning">
      The service will be unavailable on Saturday between 10:00 and 12:00.
    </c-alert>
  </div>
</template>

Types

Vue

React

Angular

TypeScript

<template>
  <div style="display: grid; gap: 1rem">
    <c-alert>A default alert without a type.</c-alert>

    <c-alert type="info">Your session expires in 15 minutes.</c-alert>

    <c-alert type="success">Your project was created.</c-alert>

    <c-alert type="warning">Your quota is almost full.</c-alert>

    <c-alert type="error">The file could not be uploaded.</c-alert>
  </div>
</template>

API reference

`<c-alert>`

A persistent, in-flow status message: a tinted box whose type carries a status family's colours through the icon, heading and accent edge, while the body copy stays neutral.

Properties

Property	Attribute	Type	Default	Description
`dismissible`	`dismissible`	`boolean`	`false`	Show a dismiss button. The alert only emits `dismiss` — removing it from the page stays the consumer's job.
`heading`	`heading`	`string`	—	Heading rendered above the message. The `heading` slot overrides it for rich content.
`type`	`type`	`CAlertType`	`'default'`	Type of the alert

Events

Event	Detail	Description
`dismiss`	`void`	Fired when the dismiss button is pressed. The alert does not hide itself — the consumer owns removal.

Slots

Slot	Description
`heading`	Rich heading content; overrides the `heading` prop
`default`	Default slot

CSS parts

Style from outside with c-alert::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The tinted box carrying the type's wash, hairline border and accent edge
`icon`	The status icon svg
`content`	The wrapper around the heading and message content
`heading`	The heading paragraph rendered from the `heading` prop
`dismiss`	The dismiss button rendered when `dismissible` is set

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CAlertIconType`

The alert types that carry a status family's accent colour; `default` uses the brand primary. Every type renders its status icon.

export type CAlertIconType = 'error' | 'info' | 'success' | 'warning';

`CAlertProps`

export interface CAlertProps {
  /**
   * Show a dismiss button. The alert only emits `dismiss` — removing it from
   * the page stays the consumer's job.
   */
  dismissible?: boolean;
  /**
   * Heading rendered above the message. The `heading` slot overrides it for
   * rich content.
   *
   * @freeform
   */
  heading?: string;
  /**
   * Type of the alert
   *
   * @seeded from csc-ui — verify
   */
  type?: CAlertType;
}

`CAlertType`

Type of the alert. `default` — equivalently, omitting the attribute — renders the brand-primary look; the four status types carry their status family's colours.

export type CAlertType = 'default' | CAlertIconType;