Status
Used to indicate the status of a process or state
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>Examples
Label
Render the label within the Status.Root component.
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.
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