getStatusClass()function

getStatusClass({ status }: StatusVariants): string | undefined
ParamType
variantsStatusVariants
Variant props for the semantic status of an element, e.g. status="success". required
    .statusStatus
Status for the element.
Return
string | undefined
The combined tint + status class string, or undefined when no status is set.

Get the status tint class for a component from its status variant prop.

  • Sets the key .tint-50 colour for an element (e.g. --color-success) based on e.g. status="success".
  • The full set of shades e.g. --tint-20 and --tint-95 are created for the selected colour, ready for the element to compose.

Examples

getStatusClass({ status: "success" }) // "tint success"