Label

Multiple or single labels can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

Properties

NameTypeDefault
variant

"default" | "info" | "success" | "warning" | "danger"

Set the appropriate colors for the component
"default"
filled

boolean

Adds additional emphasis or highlight critical status

The Label supports margin styled-system props.

Examples

DefaultCongratulationsCautionFailed️

Combinations

variant="default"

Label

variant="default"

filled

Label

variant="info"

Label

variant="info"

filled

Label

variant="success"

Label

variant="success"

filled

Label

variant="warning"

Label

variant="warning"

filled

Label

variant="danger"

Label

variant="danger"

filled

Label