# Small Corner Radius

## Essence

Small Corner Radius is the compact rounded-corner token for interactive controls and small UI elements.

## Hook

Use when a button, menu item, tag, search field, or compact control needs visible softness without becoming card-like.

## Internal Rules

- Token: `--radius-sm`.
- Value: `0.5rem / 8px`.
- Uses the shared `--corner-shape: squircle` continuous corner behavior.
- Keep this token for compact controls and small affordances.
- Do not use this token for larger cards or full content surfaces when Medium Corner Radius is available.

## Use When

- Interactive buttons and links with framed shapes.
- Menu items and collapsible menu rows.
- Tags and small labels.
- Search fields and compact form controls.

## Do Not Use When

- The component is a card, tile, or larger surface.
- The shape is intentionally square.
- The component is intentionally pill-shaped or circular.

## Related Components And Patterns

- Floating Button
- Header Menu Button
- Icon and Label Button
- Menu Item
- Tag
- Search Field
- Medium Corner Radius owns larger surfaces.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `packages/design-system/src/components`