Alert

The Alert component displays contextual feedback messages for common user actions. It supports multiple visual styles, optional headings, contextual links, and dismissible alerts.

Import

import { Alert } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Tones

Use the tone prop to change the visual appearance.

Dismissible

Enable the built-in close button with the dismissible prop.

Heading

Use Alert.Heading to create a heading inside the alert.

Links

Use Alert.Link to display links with alert-aware styling.

Complete example

Alerts can combine headings, content, links, and a dismiss button.

Utility props

All utility props provided by Prime are supported.

API

Alert

Prop	Type	Default	Description
children	ReactNode	—	Alert content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
tone	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"	"primary"	Visual appearance.
dismissible	boolean	false	Displays a close button.
onClose	function	—	Called when the close button is clicked.

Alert.Heading

Prop	Type	Default	Description
as	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"h4"	Heading element.
children	ReactNode	—	Heading content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Alert.Link

Prop	Type	Default	Description
children	ReactNode	—	Link content.
to	string	"#"	Navigation target.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.