Status

The Status component is a versatile indicator for various statuses across your application. It is customizable in terms of size, color, and style, making it adaptable to different UI needs.

Props

Prop	Type	Default	Description
`size`	`string`	`md`	Defines the size of the status. Options: `xs`, `sm`, `md`, `lg`, `xl`.
`color`	`string`	`green`	Sets the color of the status. Supports Tailwind colors and handles `black` and `white` explicitly.
`outlined`	`boolean`	`false`	If `true`, renders the status with only a border and no fill.
`label`	`string`	`null`	An optional label to be displayed next to the status.

Examples

Default Status

A basic Status with the default settings.

<x-slate::status color="green" />

Status with Label

Add a label next to the Status to provide context.

Offline

<x-slate::status color="red" size="lg" label="Offline" />

Outlined Status

Use the outlined prop to create a bordered Status without fill.

In Progress

<x-slate::status color="blue" outlined size="sm" label="In Progress" />

Status with Black Color

Explicit handling for black color, ensuring correct styling in light and dark modes.

Busy

<x-slate::status color="black" size="md" label="Busy" />

Status with White Color

Explicit handling for white color, ensuring correct styling in light and dark modes.

Available

<x-slate::status color="white" size="md" label="Available" />

Statuss in Different Sizes and Styles

Showcase different sizes and styles of Statuss.

Small

Warning

Normal

Error

Critical

<x-slate::status color="green" size="xs" label="Small" />
<x-slate::status color="yellow" size="sm" label="Warning" />
<x-slate::status color="blue" size="md" label="Normal" />
<x-slate::status color="red" size="lg" label="Error" />
<x-slate::status color="black" size="xl" label="Critical" />

Last updated on 2024-08-24T05:26:56+00:00