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 |