Displays a color coded status indicator.
<Status color="green">Active</Status>
color
"gray" | "green" | "yellow" | "red"
-
This component is based on the span element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source
span
m
mx
my
ml
mr
mt
mb
Use the color prop to set the color of your component.
<Flex align="center" gap="4"> <Status color="gray">Inactive</Status> <Status color="green">Active</Status> <Status color="yellow">Pending</Status> <Status color="red">Cancelled</Status> </Flex>