메인 콘텐츠로 이동

Alert

A contextual feedback message that communicates status or important information.

Overview

Alert renders a contextual feedback banner with four semantic variants. It supports an optional icon slot and a dismiss button for transient notifications.
  • Use info for neutral informational messages.
  • Use success to confirm a completed action.
  • Use warning to communicate a potential problem or caution.
  • Use error to signal a failure or destructive condition.
  • Provide onClose to add a dismiss button for transient alerts.

Accessibility

  • Alert renders with role="alert", which causes screen readers to announce the content immediately when it appears.
  • The close button has a built-in aria-label="Close". Override it when additional context helps screen reader users (e.g., "Dismiss warning").
  • For persistent alerts that should not interrupt the reading flow, consider role="status" via the HTML role prop instead.

Import

import { Alert } from "@cocso-ui/react";

Default

All four semantic variants in their default appearance.

With Close Button

Pass an onClose callback to render a dismiss button inside the alert.

API Reference

Alert

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "error""info"Controls the background color and icon color to communicate semantic meaning.
iconReactNode-Optional icon element rendered before the content. Use an icon from `@cocso-ui/react-icons` that matches the variant.
onClose() => void-When provided, renders a close button. Call this to remove or hide the alert from the UI.
children*ReactNode-The alert message content.