Alert

Inline message banner for communicating status, warnings, or errors to the user.

When to use

• System feedback after an action (save failed, permission denied).
• Contextual warnings before a risky action.
• Success confirmation after a completed flow.
• Informational notes within a form or page section.

When NOT to use

• For transient notifications that dismiss themselves — use a Toast (planned).
• For blocking the user — use a Dialog.

Import

import { Alert, AlertTitle, AlertDescription } from '@mihcm/ui/Alert';

Basic usage

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>This action requires admin privileges.</AlertDescription>
</Alert>

Variants

Composition

• Pair with an icon from @mihcm/icons placed as a direct child — the component offsets sibling text automatically via [&>svg~*]:pl-7.
• AlertTitle renders an <h5>. AlertDescription renders a <div> for multi-paragraph content.

Related

• Badge — inline status label.
• Planned: Toast.