Status

Indicate the status of an object.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Status

React

<Status>Status</Status>

CSS

<p class="status">Status</p>

Props

Color

Inactive

Success

Info

Warning

Error

React

<Status>Inactive</Status>
<Status color="success">Success</Status>
<Status color="info">Info</Status>
<Status color="warning">Warning</Status>
<Status color="error">Error</Status>

CSS

<p class="status">Inactive</p>
<p class="status status-success">Success</p>
<p class="status status-info">Info</p>
<p class="status status-warning">Warning</p>
<p class="status status-error">Error</p>

Dense

Dense

React

<Status dense>Dense</Status>

CSS

<p class="status status-dense">Dense</p>