Status

Status is component that indicate the status of a process or state.

Import

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

Copied!

Usage

Editable example

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

Copied!

Change sizes

Editable example

<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!

Display labels

Editable example

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

Copied!

Edit this page on GitHub

PreviousAlert NextLoading