Alert
Alert is a component that conveys information to the user.
セル
か…完全体に………完全体になれさえすれば………！！！<Alert.Root>
<Alert.Icon />
<Alert.Title>セル</Alert.Title>
<Alert.Description>
か…完全体に………完全体になれさえすれば………！！！
</Alert.Description>
</Alert.Root>
Usage
import { Alert } from "@yamada-ui/react"
import { Alert } from "@/components/ui"
import { Alert } from "@workspaces/ui"
<Alert.Root>
<Alert.Icon />
<Alert.Title />
<Alert.Description />
</Alert.Root>
Change Status
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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
Accessibility
Alert follows the WAI-ARIA - Alert Pattern for accessibility.
ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
|---|---|---|
Alert.Root | role="alert" | Indicates that it is an alert. |
Similar Components
Snacks
Snacks is a component for controlling notifications used in forms and other similar situations.
Tip
Tip is a component that displays supplementary information with a built-in icon trigger.
EmptyState
EmptyState is a component used to display when a resource is empty or unavailable.
CircleProgress
CircleProgress is a component that displays progress in a circular progress bar.
Progress
Progress is a component for visually indicating progress.
Skeleton
Skeleton is a component that acts as a placeholder until content is loaded.
Status
Status is component that indicate the status of a process or state.
Uses Components & Hooks
Icon
Icon is a general icon component that can be used in your projects.
Loading
Loading is a component displayed during waiting times, such as when data is being loaded.
Status
Status is component that indicate the status of a process or state.