Status
Status is component that indicate the status of a process or state.
<Status />
Usage
import { Status } from "@yamada-ui/react"
import { Status } from "@/components/ui"
import { Status } from "@workspaces/ui"
<Status />
Change Sizes
Info
Success
Warning
Error
Info
Success
Warning
Error
Info
Success
Warning
Error
<VStack>
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size}>
<Status size={size} value="info">
Info
</Status>
<Status size={size} value="success">
Success
</Status>
<Status size={size} value="warning">
Warning
</Status>
<Status size={size} value="error">
Error
</Status>
</HStack>
)}
</For>
</VStack>
Change Color Scheme
Info
Success
Warning
Error
<HStack>
<For
each={[
{ colorScheme: "green", status: "info" },
{ colorScheme: "purple", status: "success" },
{ colorScheme: "blue", status: "warning" },
{ colorScheme: "red", status: "error" },
]}
>
{(row) => (
<Status key={row.status} colorScheme={row.colorScheme} value={row.status}>
{toTitleCase(row.status)}
</Status>
)}
</For>
</HStack>
Display Labels
Info
Success
Warning
Error
<HStack>
<Status value="info">Info</Status>
<Status value="success">Success</Status>
<Status value="warning">Warning</Status>
<Status value="error">Error</Status>
</HStack>
Props
Similar Components
EmptyState
EmptyState is a component used to display when a resource is empty or unavailable.
Alert
Alert is a component that conveys information to the user.
Badge
Badge is a component that emphasizes the status of an item to make it immediately recognizable.
CircleProgress
CircleProgress is a component that displays progress in a circular progress bar.
Indicator
Indicator is a component that displays at the corner of elements such as avatars.
Progress
Progress is a component for visually indicating progress.
Skeleton
Skeleton is a component that acts as a placeholder until content is loaded.
Snacks
Snacks is a component for controlling notifications used in forms and other similar situations.