Alert
Alertは、ユーザーに情報を伝達するコンポーネントです。
セル
か…完全体に………完全体になれさえすれば………！！！<Alert.Root>
<Alert.Icon />
<Alert.Title>セル</Alert.Title>
<Alert.Description>
か…完全体に………完全体になれさえすれば………！！！
</Alert.Description>
</Alert.Root>
使い方
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>
ステータスを変更する
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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>
バリアントを変更する
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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>
カラースキームを変更する
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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>
ローディングスキームを変更する
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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>
レイアウトを変更する
セル
か…完全体に………完全体になれさえすれば………！！！セル
か…完全体に………完全体になれさえすれば………！！！<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は、アクセシビリティに関してWAI-ARIA - Alert Patternに従います。
ARIAロールと属性
| コンポーネント | ロールと属性 | 用途 |
|---|---|---|
Alert.Root | role="alert" | アラートであることを示します。 |
類似のコンポーネント
Snacks
Snacksは、フォームなどで使用される通知を制御するコンポーネントです。
Tip
Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。
EmptyState
EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。
Skeleton
Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
Status
Statusは、プロセスまたは状態のステータスを示すコンポーネントです。
Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
CircleProgress
CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。
使用しているコンポーネント・フック
Icon
Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。
Loading
Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。
Status
Statusは、プロセスまたは状態のステータスを示すコンポーネントです。