Alert

Alert

The Alert component is used to communicate important information, status updates, warnings, or errors to users. It supports different colors and visual variants, as well as optional icons, actions, and dismissal behavior.

import Alert from "rocksolidjs/Alert";

export default function Example() {
  return (
    <Alert color="success">
      Your changes have been saved successfully.
    </Alert>
  );
}

Examples

Colors

Use the color prop to communicate the semantic meaning of an alert.

import Alert from "rocksolidjs/Alert";

export default function Example() {
  return (
    <div class="grid gap-4 w-full">
      <Alert color="default">
        This is a default alert.
      </Alert>
      <Alert color="success">
        Your changes were saved successfully.
      </Alert>
      <Alert color="warning">
        Please review your changes before continuing.
      </Alert>
      <Alert color="info">
        A new update is available.
      </Alert>
      <Alert color="error">
        Something went wrong. Please try again.
      </Alert>
    </div>
  );
}

Variants

Use the variant prop to change the visual appearance of the alert.

import Alert from "rocksolidjs/Alert";

export default function Example() {
  return (
    <div class="w-full grid gap-4">
      <Alert color="success" variant="solid">
        This is a solid alert.
      </Alert>
      <Alert color="success" variant="filled">
        This is a filled alert.
      </Alert>
      <Alert color="success" variant="outlined">
        This is an outlined alert.
      </Alert>
    </div>
  );
}

Icon

Use the icon prop to add an icon to the alert.

import Alert from "rocksolidjs/Alert";

export default function Example() {
  return (
    <Alert
      color="info"
      icon={<CustomInfoIcon />}
    >
      This alert contains an custom icon.
    </Alert>
  );
}

const CustomInfoIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none" />
    <path fill="currentColor" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1m-.5 5a1 1 0 1 0 0 2h.5a1 1 0 1 0 0-2zM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1z" clip-rule="evenodd" />
  </svg>
);

Close

Use the onClose prop to make an alert dismissible. Providing onClose adds a close button to the alert.

import Alert from "rocksolidjs/Alert";

export default function Example() {
  return (
    <div class="w-full grid gap-4">
      <Alert
        color="info"
        variant="solid"
        onClose={(event: MouseEvent) => {
          console.log("Alert closed", event);
        }}
      >
        This alert can be dismissed.
      </Alert>
      <Alert
        color="info"
        onClose={(event: MouseEvent) => {
          console.log("Alert closed", event);
        }}
      >
        This alert can be dismissed.
      </Alert>
      <Alert
        color="info"
        variant="outlined"
        onClose={(event: MouseEvent) => {
          console.log("Alert closed", event);
        }}
      >
        This alert can be dismissed.
      </Alert>
    </div>
  );
}

Custom Actions

Use the action prop to add a custom action to the alert. Use the Button component for interactive actions.

import Alert from "rocksolidjs/Alert";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Alert
      color="warning"
      action={<Button size="small" color="warning">Review</Button>}
      onClose={() => console.log("Close action")}
    >
      Please review your account settings.
    </Alert>
  );
}

Accessibility

The Alert component follows common accessibility patterns for communicating important information to users.

  • By default, the Alert component applies role="alert" so its content is announced to screen readers when it is rendered.
  • Use role="status" for informational or non-critical alerts.
  • Actions within an alert should be keyboard accessible and have tabindex="0" when required.
  • Use clear and descriptive text to communicate the purpose of the alert.
  • Do not rely on color or icons alone to communicate meaning.
  • When using onClose, ensure the close button has an accessible name.
  • Use descriptive labels for interactive actions.

API

Alert

The Alert component supports semantic colors, visual variants, icons, custom actions, dismissal, and slot customization.

Prop Type Required Default Description
action JSXElement No — Adds a custom action to the alert. Use the <Button /> component for interactive actions.
as string No "div" Specifies the HTML element used to render the alert.
children JSXElement Yes — Content displayed inside the alert.
class string No — Custom CSS class applied to the alert.
color "default" | "success" | "warning" | "info" | "error" No "default" Sets the semantic color of the alert.
icon JSXElement No — Custom icon displayed in the alert.
onClose (event: MouseEvent) => void No — Adds a close button to the alert and handles the close event.
slotProps { icon?: object; content?: object; action?: object; closeButton?: object } No — Provides props for customizing the Alert slots.
  • icon — Props for the icon slot. Accepts TypographyProps.
  • content — Props for the content slot. Accepts TypographyProps.
  • action — Props for the action slot.
  • closeButton — Props for the close button slot. Accepts IconButtonProps.
variant "solid " | "filled" | "outlined" No "filled" Controls the visual style of the alert.
  • Button — Use Button for interactive actions inside an alert.
  • IconButton — Use IconButton for icon-based actions such as dismissing an alert.
  • Typography — Use Typography to customize alert content and icon slots.