Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Status

Statusは、プロセスまたは状態のステータスを示すコンポーネントです。

ソース@yamada-ui/status

インポート

import { Status } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<HStack>
  <For each={["info", "success", "warning", "error"]}>
    {(value, index) => <Status key={index} value={value} />}
  </For>
</HStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => (
      <HStack>
        <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>
Copied!

ラベルを表示する

編集可能な例

<HStack>
  <Status value="info">Info</Status>
  <Status value="success">Success</Status>
  <Status value="warning">Warning</Status>
  <Status value="error">Error</Status>
</HStack>
Copied!

GitHubでこのページを編集する

AlertLoading