---
title: Alert
description: "`Alert` is a component that conveys information to the user."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alert/alert.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alert
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-alert--basic
---

```tsx
<Alert.Root>
  <Alert.Icon />
  <Alert.Title>セル</Alert.Title>
  <Alert.Description>
    か…完全体に………完全体になれさえすれば………！！！
  </Alert.Description>
</Alert.Root>
```

## Usage

```tsx
import { Alert } from "@yamada-ui/react"
```

```tsx
import { Alert } from "@/components/ui"
```

```tsx
import { Alert } from "@workspaces/ui"
```

```tsx
<Alert.Root>
  <Alert.Icon />
  <Alert.Title />
  <Alert.Description />
</Alert.Root>
```

### Change Status

```tsx
<VStack>
  <For each={["info", "success", "warning", "error"]}>
    {(status, index) => (
      <Alert.Root key={index} status={status}>
        <Alert.Icon />
        <Alert.Title>セル</Alert.Title>
        <Alert.Description>
          か…完全体に………完全体になれさえすれば………！！！
        </Alert.Description>
      </Alert.Root>
    )}
  </For>
</VStack>
```

### Change Variant

```tsx
<VStack>
  <For each={["plain", "solid", "subtle", "surface", "island"]}>
    {(variant, index) => (
      <Alert.Root key={index} variant={variant}>
        {variant !== "island" && <Alert.Icon />}
        <Alert.Title>セル</Alert.Title>
        <Alert.Description>
          か…完全体に………完全体になれさえすれば………！！！
        </Alert.Description>
      </Alert.Root>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For
    each={[
      { colorScheme: "green", status: "info" },
      { colorScheme: "purple", status: "success" },
      { colorScheme: "sky", status: "warning" },
      { colorScheme: "pink", status: "error" },
    ]}
  >
    {(row, index) => (
      <Alert.Root key={index} colorScheme={row.colorScheme} status={row.status}>
        <Alert.Icon />
        <Alert.Title>セル</Alert.Title>
        <Alert.Description>
          か…完全体に………完全体になれさえすれば………！！！
        </Alert.Description>
      </Alert.Root>
    )}
  </For>
</VStack>
```

### Change Loading Scheme

```tsx
<VStack>
  <For
    each={[
      { variant: "plain", status: "info", loadingScheme: undefined },
      { variant: "subtle", status: "success", loadingScheme: "grid" },
      { variant: "solid", status: "warning", loadingScheme: "puff" },
      { variant: "surface", status: "error", loadingScheme: "dots" },
    ]}
  >
    {(row, index) => (
      <Alert.Root variant={row.variant} status={row.status}>
        <Alert.Loading loadingScheme={row.loadingScheme} />
        <Alert.Title>セル</Alert.Title>
        <Alert.Description>
          か…完全体に………完全体になれさえすれば………！！！
        </Alert.Description>
      </Alert.Root>
    )}
  </For>
</VStack>
```

### Customize Layout

```tsx
<VStack>
  <Alert.Root
    alignItems="center"
    flexDirection="column"
    h="2xs"
    justifyContent="center"
    status="success"
    textAlign="center"
  >
    <Alert.Icon boxSize="40px" mr={0} />
    <Alert.Title fontSize="lg" mb={1} mr={0} mt={4}>
      セル
    </Alert.Title>
    <Alert.Description>
      か…完全体に………完全体になれさえすれば………！！！
    </Alert.Description>
  </Alert.Root>

  <Alert.Root status="success">
    <Alert.Icon />

    <VStack gap="xs">
      <Alert.Title>セル</Alert.Title>
      <Alert.Description>
        か…完全体に………完全体になれさえすれば………！！！
      </Alert.Description>
    </VStack>

    <CloseButton
      colorScheme="mono"
      position="absolute"
      right={2}
      top={2}
      onClick={noop}
    />
  </Alert.Root>
</VStack>
```

## Props

### Alert.Root

| Prop          | Default   | Type                                                                                                                      | Description                                |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -         | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `variant`     | `"plain"` | `"island" \| "plain" \| "solid" \| "subtle" \| "surface" ...`                                                             | The variant of the component.              |
| `status`      | `"info"`  | `StatusScheme`                                                                                                            | The status of the alert.                   |

### Alert.Description

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Alert.Icon

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Alert.Loading

| Prop             | Default  | Type                                                                                                                                                              | Description                                |
| ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -        | `As`                                                                                                                                                              | The HTML element to render.                |
| `asChild`        | -        | `boolean`                                                                                                                                                         | Merges its props onto its immediate child. |
| `css`            | -        | `CSSObject \| CSSObject[]`                                                                                                                                        | The CSS object.                            |
| `colorScheme`    | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                         | Set color scheme variables.                |
| `duration`       | -        | `IconProps["dur"]`                                                                                                                                                | The CSS `dur` property.                    |
| `loadingScheme`  | `"oval"` | `Loading.Scheme`                                                                                                                                                  | The loading scheme.                        |
| `secondaryColor` | -        | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The CSS `color` property.                  |

### Alert.Title

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

`Alert` follows the [WAI-ARIA - Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) for accessibility.

### ARIA Roles and Attributes

| Component    | Role and Attributes | Usage                          |
| ------------ | ------------------- | ------------------------------ |
| `Alert.Root` | `role="alert"`      | Indicates that it is an alert. |