Socra UI
Chips
Data Display / Chip

Chips

Every Chip variant, size, semantic color, and interactive state rendered live from @socra/theme-mui.

Library Status

Built
@socra/theme-mui

@socra/theme-mui themes MuiChip.

State Matrix

Medium

Intent
Variant
Enabled
Hovered
Focused
Pressed
Disabled

Default

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Primary

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Secondary

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Error

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Warning

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Info

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Success

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Small

Intent
Variant
Enabled
Hovered
Focused
Pressed
Disabled

Default

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Primary

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Secondary

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Error

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Warning

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Info

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Success

Filled

Label
Label
Label
Label
Label

Outlined

Label
Label
Label
Label
Label

Usage

Status

Use semantic Chips for compact state, never as decoration.

Synced
Filter

Use clickable Chips when the label changes a filter, selection, or scoped view.

Active
Metadata

Use default Chips for compact labels and quiet facts.

Shared

Theme References

Primary action
color
theme.palette.primary.mainLive value: #00CDF0

Primary action role.

Surface
surface
theme.palette.background.surfaceLive value: rgb(32, 35, 39)

Working surface role.

Text primary
text
theme.palette.text.primaryLive value: #e0e7e7

Primary text role.

Spacing
spacing
theme.spacing(n)Live value: Resolved by recipe

Spacing role.

Shape
shape
theme.shape.borderRadiusLive value: 12

Shape role.

Usage Contract

Do

Use the shared primitive first.

The system improves once and every product inherits the fix.

Name the user job before the component.

A component earns a place only when it helps the user decide, act, recover, or understand.

Promote missing behavior into the library.

Local UI creates drift; library contracts create standardization.

Do not

Do not build a product-local replacement.

A local primitive splits behavior and future migrations.

Do not copy theme values.

Values live in @socra/theme and are consumed by name.

Do not add decoration as a substitute for structure.

If the hierarchy is weak, fix the hierarchy.