Status - Chakra Ui — ContextQMD

Usage

tsx

import { Status } from "@chakra-ui/react"

tsx

<Status.Root>
  <Status.Indicator />
</Status.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Render the label within the Status.Root component.

Use the size prop to change the size of the status component.

Here's how to setup the Status for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

bash

npx @chakra-ui/cli snippet add status

Explore the Status component parts interactively. Click on parts in the sidebar to highlight them in the preview.