# @askrjs/themes/alert

> Published API exports for @askrjs/themes/alert.

Source: [https://askrjs.com/docs/reference/api/themes/alert](https://askrjs.com/docs/reference/api/themes/alert)

Status: stable. Packages: @askrjs/themes/alert.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 4 exports from the declarations shipped by @askrjs/themes.

### `Alert`

```ts
Alert: (props: AlertProps) => JSX.Element
```

Renders an alert/status banner with an optional icon, title, description,
actions, and a dismiss button. Automatically picks an "alert" or "status"
ARIA role from `variant` unless `role` is set explicitly.

### `AlertHeadingTag`

```ts
AlertHeadingTag: "h2" | "h3" | "h4" | "h5" | "h6"
```

Heading tag allowed for an alert's title via `titleAs`.

### `AlertProps`

```ts
AlertProps: DivProps & {
  actions?: unknown;
  children?: unknown;
  description?: unknown;
  dismissLabel?: string;
  icon?: unknown;
  onDismiss?: () => void;
  title?: unknown;
  titleAs?: AlertHeadingTag;
  variant?: AlertVariant;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Alert } component.

- `actions`: actions?: unknown;

- `children`: children?: unknown;

- `description`: description?: unknown;

- `dismissLabel`: dismissLabel?: string | undefined;

- `icon`: icon?: unknown;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `title`: title?: unknown;

- `titleAs`: titleAs?: AlertHeadingTag | undefined;

- `variant`: variant?: AlertVariant | undefined;

### `AlertVariant`

```ts
AlertVariant: "default" | "info" | "success" | "warning" | "danger"
```

Visual tone of an {@link AlertProps} alert; `"danger"`/`"warning"` render with `role="alert"`.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/alert-dialog/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/aspect-ratio/index.md)