Alert - EnterUI

Core ComponentsUpdated May 3, 2026

#Default usage

Token driven

Components inherit FroggDesign variables.

Check release notes

Public API changes should include migration notes.

#Usage

import { Alert, AlertDescription, AlertTitle } from "@froggdesign/enter-ui";

export function Example() {
  return (
    <>
      <Alert variant="info">
        <AlertTitle>Token driven</AlertTitle>
        <AlertDescription>Components inherit FroggDesign variables.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Check release notes</AlertTitle>
        <AlertDescription>Public API changes should include migration notes.</AlertDescription>
      </Alert>
    </>
  );
}

#Patterns

Build failed

Fix type errors before publishing the package.

#Accessibility

Alert uses role="status" by default and role="alert" for error variants unless you pass a custom role.

#API

variant: info, success, warning, or error.
AlertTitle and AlertDescription provide consistent text hierarchy.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page