'use client'
import { HStack } from '@chakra-ui/react'
import { Status } from '@saas-ui/react'
export const StatusBasic = () => {
return (
<HStack gap="6">
<Status value="error" />
<Status value="info" />
<Status value="warning" />
<Status value="success" />
</HStack>
)
}
Anatomy
import { Status } from '@saas-ui/react/status'<Status>Label</Status>Examples
Label
Render the label within the status component.
Error
Info
Warning
Success
'use client'
import { HStack } from '@chakra-ui/react'
import { Status } from '@saas-ui/react'
export const StatusWithLabel = () => {
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
'use client'
import { For, HStack, Stack } from '@chakra-ui/react'
import { Status } from '@saas-ui/react'
export const StatusWithSizes = () => {
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' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |