Notification

The Notification organism is used to provide application-level feedback. It is transient by nature, conveying the result of a user action or system event without permanently interrupting the user flow.

Notifications adhere strictly to the Curva & Concreto doctrine. They utilize a structural, geometric left border (var(--accent)) to signify intent rather than wrapping the entire container in overwhelming saturated colors or nesting curves inside curves.

Intents

The component adapts its styling based on its intent prop. These intents map directly to the COBOGÓ core colors and their --soft variants:

Props

• intent ('info' | 'tip' | 'warning' | 'danger'): Controls the semantic color scheme and icon. Defaults to 'info'.
• title (string): The primary heading text.
• message (string, optional): Secondary descriptive text.
• dismissible (boolean): Whether to show the close button. Defaults to true.
• ondismiss (() => void, optional): Callback function executed when the close button is clicked.

Accessibility

The Notification component handles its semantic roles automatically based on the intent:

• danger and warning intents use role="alert" and aria-live="assertive".
• info and tip intents use role="status" and aria-live="polite".

When dismissible={true}, the close button includes an explicit aria-label="Dismiss notification" for screen readers.

Dark Mode Integration

In dark mode, the --soft backgrounds invert to dark equivalents, while the core --accent colors remain vibrant to maintain semantic clarity.