Status
Statusは、プロセスまたは状態のステータスを示すコンポーネントです。
<Status />
使い方
import { Status } from "@yamada-ui/react"
import { Status } from "@/components/ui"
import { Status } from "@workspaces/ui"
<Status />
サイズを変更する
Info
Success
Warning
Error
Info
Success
Warning
Error
Info
Success
Warning
Error
<VStack>
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size}>
<Status size={size} value="info">
Info
</Status>
<Status size={size} value="success">
Success
</Status>
<Status size={size} value="warning">
Warning
</Status>
<Status size={size} value="error">
Error
</Status>
</HStack>
)}
</For>
</VStack>
カラースキームを変更する
Info
Success
Warning
Error
<HStack>
<For
each={[
{ colorScheme: "green", status: "info" },
{ colorScheme: "purple", status: "success" },
{ colorScheme: "blue", status: "warning" },
{ colorScheme: "red", status: "error" },
]}
>
{(row) => (
<Status key={row.status} colorScheme={row.colorScheme} value={row.status}>
{toTitleCase(row.status)}
</Status>
)}
</For>
</HStack>
ラベルを表示する
Info
Success
Warning
Error
<HStack>
<Status value="info">Info</Status>
<Status value="success">Success</Status>
<Status value="warning">Warning</Status>
<Status value="error">Error</Status>
</HStack>
Props
類似のコンポーネント
EmptyState
EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。
Skeleton
Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
Tag
Tagは、アイテムを説明するキーワードを使用して分類または整理するコンポーネントです。
Snacks
Snacksは、フォームなどで使用される通知を制御するコンポーネントです。
Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
Indicator
Indicatorは、アバターなどの要素の隅に表示するコンポーネントです。
CircleProgress
CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。
Badge
Badgeは、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。