Basic usage
Use the variant prop to control the appearance of the status indicator.
import { StatusIndicator } from '@houzz/ui';Color variants
There are the following semantic color variants available: neutral, info, success, warning, and danger.
Decoration options
By default, the circle icon is used as a decoration. Similar to other components, the icon prop can be used to pass an icon name or an icon component to change the default appearance.
Setting icon={null} will remove the decoration completely but be aware this is valid only for the primary variant.
The neutral color variant allows changing the decoration dot or icon color. Pass a hex code or a semantic color name to the iconColor prop.
Props
StatusIndicatorSystem Props
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRID- Learn More
| Name | Type | Description |
gradient | ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>> | - |
colorVariant | "neutral" | "danger" | "success" | "warning" | "info" | Color variant |
variant | "primary" | "secondary" | Style of status indicator |
icon | ReactNode | Icon name or component, `circle` (dot) is used by default. Use `null` for no icon. Icon name or component, `circle` (dot) is used by default. |
iconColor | string | Override the icon color on neutral color variant. Theme color palette values can be used as well as hex codes. |