#Overview
The status component acts as a visual cue, allowing users to quickly identify the tone—whether positive, neutral, or negative — of the text content, thereby enhancing readability and comprehension.
| Name | Type | Default | Description | Controls |
|---|---|---|---|---|
| children * | ReactNode | - | The text content | |
| variant * | "negative" | "neutral" | "positive" | "warning" | - | The variant of the status text | |
| icon | ReactElement | - | Adds an icon |
import { Status } from "@blocks/ui";
export const SuccessText = () => <Status variant="positive">Successful</Status>;
#Colors
- Token
TEXT_NEGATIVE#c42#f75#e02#f44TEXT_NEUTRAL#000#fff#000#fffTEXT_POSITIVE#280#8d6#282#4c4TEXT_WARNING#c50#f80#c50#f80