Status is a flexible component for displaying status icons with color and size options. It supports semantic color classes and size variants for consistent UI status indicators.
The default status icon (medium size, no color).
Status is a standalone component.
The Status component displays a status indicator icon. Use color and size props or boolean flags to control appearance. The default size is md.
| Status Props | Type | Description |
|---|---|---|
color | string | Sets the status color. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the status size. Options: - |
| xs | boolean | Sets size to xs. |
| sm | boolean | Sets size to sm. |
| md | boolean | Sets size to md. |
| lg | boolean | Sets size to lg. |
| xl | boolean | Sets size to xl. |
| Status Slots | Description |
|---|---|
default | The default slot. Place custom content inside the status icon if desired. |
Status icons with different semantic colors, using either the color prop or boolean flags.
Status icons with different sizes, using either the size prop or boolean flags.
Combine color and size props for custom status icons.