---
title: Status
description: "`Status` is component that indicate the status of a process or state."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/status/status.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/status
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-status--basic
---

```tsx
<Status />
```

## Usage

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

```tsx
import { Status } from "@/components/ui"
```

```tsx
import { Status } from "@workspaces/ui"
```

```tsx
<Status />
```

### Change Sizes

```tsx
<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>
```

### Change Color Scheme

```tsx
<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>
```

### Display Labels

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

## Props

| Prop             | Default  | Type                                                                                                                      | Description                                  |
| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `as`             | -        | `As`                                                                                                                      | The HTML element to render.                  |
| `asChild`        | -        | `boolean`                                                                                                                 | Merges its props onto its immediate child.   |
| `css`            | -        | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                              |
| `colorScheme`    | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                  |
| `size`           | `"md"`   | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                   |
| `indicatorProps` | -        | `HTMLStyledProps`                                                                                                         | The props for the status indicator component |
| `labelProps`     | -        | `HTMLStyledProps`                                                                                                         | The props for the status label component     |
| `value`          | `"info"` | `StatusScheme`                                                                                                            | The type of the status                       |