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>