Status
Used to indicate the status of a process or state
AI TipWant to skip the docs? Use the MCP Server
import { HStack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="6">
<Status.Root colorPalette="red">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="orange">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="green">
<Status.Indicator />
</Status.Root>
</HStack>
)
}
Usage
import { Status } from "@chakra-ui/react"<Status.Root>
<Status.Indicator />
</Status.Root>info
If you prefer a closed component composition, check out the
snippet below.Examples
Label
Render the label within the Status.Root component.
Error
Info
Warning
Success
import { HStack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="6">
<Status.Root colorPalette="red">
<Status.Indicator />
Error
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
Info
</Status.Root>
<Status.Root colorPalette="orange">
<Status.Indicator />
Warning
</Status.Root>
<Status.Root colorPalette="green">
<Status.Indicator />
Success
</Status.Root>
</HStack>
)
}
Sizes
Use the size prop to change the size of the status component.
In Review
Error
Approved
In Review
Error
Approved
In Review
Error
Approved
import { For, HStack, Stack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size} gap="10" px="4">
<Status.Root size={size} width="100px" colorPalette="orange">
<Status.Indicator />
In Review
</Status.Root>
<Status.Root size={size} width="100px" colorPalette="red">
<Status.Indicator />
Error
</Status.Root>
<Status.Root size={size} width="100px" colorPalette="green">
<Status.Indicator />
Approved
</Status.Root>
</HStack>
)}
</For>
</Stack>
)
}
Closed Component
Here's how to setup the Status for a closed component composition.
import type { ColorPalette } from "@chakra-ui/react"
import { Status as ChakraStatus } from "@chakra-ui/react"
import * as React from "react"
type StatusValue = "success" | "error" | "warning" | "info"
export interface StatusProps extends ChakraStatus.RootProps {
value?: StatusValue
}
const statusMap: Record<StatusValue, ColorPalette> = {
success: "green",
error: "red",
warning: "orange",
info: "blue",
}
export const Status = React.forwardRef<HTMLDivElement, StatusProps>(
function Status(props, ref) {
const { children, value = "info", ...rest } = props
const colorPalette = rest.colorPalette ?? statusMap[value]
return (
<ChakraStatus.Root ref={ref} {...rest} colorPalette={colorPalette}>
<ChakraStatus.Indicator />
{children}
</ChakraStatus.Root>
)
},
)
If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add statusProps
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |
Explorer
Explore the Status component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
indicator
status.recipe.ts