import { HStack } from "@chakra-ui/react"
import { Status } from "@/components/ui/status"
const Demo = () => {
return (
<HStack gap="6">
<Status value="error" />
<Status value="info" />
<Status value="warning" />
<Status value="success" />
</HStack>
)
}
Setup
If you don't already have the snippet, run the following command to add the
status snippet
npx @chakra-ui/cli snippet add statusThe snippet includes a closed component composition for the Status component.
Usage
import { Status } from "@/components/ui/status"<Status>Label</Status>Examples
Label
Render the label within the status component.
Error
Info
Warning
Success
import { HStack } from "@chakra-ui/react"
import { Status } from "@/components/ui/status"
const Demo = () => {
return (
<HStack gap="6">
<Status value="error">Error</Status>
<Status value="info">Info</Status>
<Status value="warning">Warning</Status>
<Status value="success">Success</Status>
</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 } from "@chakra-ui/react"
import { Status } from "@/components/ui/status"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size} gap="10" px="4">
<Status size={size} width="100px" value="warning">
In Review
</Status>
<Status size={size} width="100px" value="error">
Error
</Status>
<Status size={size} width="100px" value="success">
Approved
</Status>
</HStack>
)}
</For>
</Stack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |