Radius

Component-specific border radius tokens for visual consistency.

Overview

Byteion uses component-specific radius tokens instead of generic choices like rounded-md, rounded-lg, or rounded-xl inside shared components. Each component type has its own token, ensuring visual harmony across buttons, cards, inputs, and overlays.

Radius controls the personality of the interface:

smaller radius feels sharper and more enterprise
larger radius feels softer and more friendly
tokenized radius keeps buttons, inputs, cards, panels, badges, and overlays visually consistent
global rebranding becomes easier because radius changes happen at the token layer, not in every component file

Radius tokens

All tokens are defined in packages/tokens/radius.js and mapped to Tailwind utilities through the shared preset:

Token	Value	Tailwind class	Used by	Purpose
button	0.5rem	`rounded-button`	Buttons, icon buttons, segmented controls	Interactive controls
input	0.5rem	`rounded-input`	Inputs, selects, textareas, search fields	Form fields
badge	9999px	`rounded-badge`	Badges, pills, tags, counters	Pill-shaped indicators
card	0.75rem	`rounded-card`	Cards, stat cards, compact surfaces	Compact surfaces
panel	1rem	`rounded-panel`	Panels, grouped surfaces, settings blocks	Grouped sections
overlay	1.25rem	`rounded-overlay`	Modals, drawers, popovers, command menus	Floating UI

Usage examples

Button radius:

<button class="rounded-button bg-primary px-inset-md py-inset-sm text-sm font-medium text-primary-foreground">
  Save
</button>

Input radius:

<input class="rounded-input border border-border bg-background px-inset-md py-inset-sm text-foreground" />

Badge radius:

<span class="rounded-badge bg-muted px-inset-xs py-0.5 text-xs text-muted-foreground">Beta</span>

Card radius:

<div class="rounded-card border border-border bg-card p-surface-card shadow-card">
  Card content here.
</div>

Panel radius:

<div class="rounded-panel border border-border bg-card p-surface-panel">
  Panel content here.
</div>

Overlay radius:

<div class="rounded-overlay border border-border bg-popover p-surface-panel shadow-modal">
  Modal or drawer content here.
</div>

Choosing the right radius token

Use rounded-button for clickable controls — buttons, icon buttons, segmented controls.
Use rounded-input for field-like controls — inputs, selects, textareas, search fields.
Use rounded-badge for pills, chips, tags, and small counters.
Use rounded-card for reusable dashboard cards and stat cards.
Use rounded-panel for larger grouped sections — settings blocks, grouped surfaces.
Use rounded-overlay for floating UI — modals, drawers, popovers, command menus.

Correct and incorrect examples

Correct — uses component-specific radius token

<button class="rounded-button bg-primary text-primary-foreground">Save</button>

Incorrect — generic radius class creates drift

<button class="rounded-lg bg-primary text-primary-foreground">Save</button>

Correct — uses card radius token

<div class="rounded-card border border-border bg-card shadow-card">...</div>

Incorrect — arbitrary value cannot be themed

<div class="rounded-[11px] border border-border bg-card shadow-card">...</div>

Generic and arbitrary radius values create drift across components. Component-specific tokens keep the UI governed and make global radius changes a single-token update.

Customization

All semantic radius tokens are backed by CSS variables declared in packages/core/theme/variables.css. This means they can be overridden at runtime without touching component files:

:root {
  --radius-button: 0.375rem;   /* Sharper buttons */
  --radius-card: 0.5rem;       /* Sharper cards */
  --radius-overlay: 1rem;      /* Less rounded overlays */
}

To change the source of truth, update packages/tokens/radius.js and rebuild. The CSS variables in variables.css take precedence over the JS fallbacks.

Brand guidance:

Sharper brand: reduce card, panel, and overlay radius slightly while keeping buttons and inputs at their default.
Softer brand: increase card, panel, and overlay radius for a more inviting feel.
Badges should remain pill-shaped (9999px) unless the badge component design intentionally changes.

Do and Don't

Do

Use rounded-button for buttons
Use rounded-input for fields
Use rounded-card for cards
Use rounded-panel for grouped surfaces
Use rounded-overlay for floating UI
Keep radius consistent within a component family
Change radius at the token layer

Don't

Use rounded-lg or rounded-xl randomly in shared components
Use arbitrary values like rounded-[11px] in core primitives
Mix multiple radius values inside the same component family
Make badges non-pill shaped unless the design intentionally changes
Override component radius locally before checking the radius tokens

Developer tips

• Change all radii at once. Update packages/tokens/radius.js to change the visual feel across all components. Override --radius-* CSS variables for runtime changes. • Overlays are the roundest. Modals and drawers use the largest radius (1.25rem) to feel inviting and separate floating UI from normal surfaces. • Badges are always pills. 9999px ensures a perfect pill shape regardless of content width. • Audit radius drift. Search for rounded-md, rounded-lg, rounded-xl, and rounded-[ in component files to catch generic or arbitrary radius usage. • Use component-specific radius tokens in new dashboard, template, starter kit, and plugin components. Never introduce rounded-lg on a button or rounded-xl on a card. • Test radius changes on buttons, inputs, cards, modals, drawers, and badges before release. A radius that looks right on a button may feel too round on a card or too sharp on an overlay.

Design Principles — Why tokens matter
Design Tokens — Source of radius values
Button — Uses button radius
Input — Uses input radius
Card — Uses card radius
Badge — Uses badge radius
Modal — Uses overlay radius
Theming Guide — Changing brand feel with tokens

Unlock Premium Patterns

Get access to copy-paste ready Pro blocks, SaaS templates, and advanced component patterns.

Explore Pro Components