Components

Alert

Contextual feedback messages for user actions. Supports info, success, warning, and danger variants with optional dismiss functionality.

Installation

npm install @trinkui/react

Import

import { Alert } from "@trinkui/react";

Usage

Use the Alert component to display contextual messages with different severity levels.

<Alert
  variant="info"
  title="Update available"
  description="A new version is available. Please update to get the latest features."
/>

Variants

Alerts come in four variants to communicate different levels of importance.

{/* Info — general information */}
<Alert variant="info" title="Info" description="This is an informational message." />

{/* Success — positive confirmation */}
<Alert variant="success" title="Success" description="Your changes have been saved." />

{/* Warning — caution required */}
<Alert variant="warning" title="Warning" description="Your session will expire in 5 minutes." />

{/* Danger — error or destructive action */}
<Alert variant="danger" title="Error" description="Failed to save changes. Please try again." />

Dismissible

Set dismissible to allow users to close the alert.

<Alert
  variant="success"
  title="Saved!"
  description="Your profile has been updated."
  dismissible
  onDismiss={() => console.log("dismissed")}
/>

With Custom Icon

Pass a custom icon element via the icon prop.

<Alert
  variant="warning"
  icon={<ExclamationIcon />}
  title="Disk space low"
  description="You have less than 5% disk space remaining."
/>

Props

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "danger"	"info"	The visual style and color scheme of the alert
title	string	-	Bold heading text for the alert
description	string	-	Descriptive body text shown below the title
icon	ReactNode	-	Custom icon element displayed before the title
dismissible	boolean	false	Show a close button to dismiss the alert
onDismiss	() => void	-	Callback fired when the dismiss button is clicked
className	string	-	Additional CSS classes to apply

Accessibility

Uses role="alert" to announce the message to assistive technologies.
Applies aria-live="assertive" for danger and warning variants, aria-live="polite" for info and success.
Dismiss button includes an accessible label for screen readers.
Color is not the sole indicator of variant meaning — icons reinforce the message type.

← Accordion Autocomplete →