Components

Chip

Compact tag or pill element for displaying metadata, statuses, or categories.

import{ Chip }from"oks-ui"

4 variants7 color roles6 sizesDot variant

Colors

Semantic colors for status communication.

Default

Primary

Success

Warning

Danger

Controls

variant

color

size

radius

isDisabled

label

Preview

Chip

Generated Code

<Chip>Chip</Chip>

Prop	Type	Default	Description
variant	"solid" \| "soft" \| "bordered" \| "dot"	"solid"	Chip variant.
color	"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"	"default"	Chip color.
size	"xs" \| "xs-sm" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Chip size.
radius	"none" \| "xs" \| "xs-sm" \| "sm" \| "md" \| "lg" \| "full"	"full"	Border radius.
isDisabled	boolean	false	Reduce opacity.
startContent	ReactNode	—	Leading content (e.g., avatar).
endContent	ReactNode	—	Trailing content (e.g., close icon).

variant"solid"

"solid" | "soft" | "bordered" | "dot"

Chip variant.

color"default"

Chip color.

size"md"

"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"

Chip size.

radius"full"

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"

Border radius.

isDisabledfalse

boolean

Reduce opacity.

startContent—

ReactNode

Leading content (e.g., avatar).

endContent—

ReactNode

Trailing content (e.g., close icon).