Skip to documentation content
|

Radius

Use Honest UI's modern and traditional radius scales for consistent corners, pills, and circular shapes.

Radius tokens keep corner decisions consistent across components and let a product change its overall character without rewriting component classes. Honest UI provides seven roles, from subtle rounding to a full pill or circle.

Radius values are resolved by data-style, so set either modern or traditional on the same shared ancestor that owns the component theme.

Modern style

Modern is the restrained, compact option. It uses small radii so boundaries remain clear in dense product interfaces.

Modern Honest UI radius tokens
PreviewTokenValueUse
--hui-radius-12pxSmall controls and subtle corner treatment
--hui-radius-24pxButtons, inputs, menus, badges, and compact cards
--hui-radius-36pxCards and grouped component containers
--hui-radius-48pxDialogs, sheets, and larger surfaces
--hui-radius-512pxLarge panels and prominent containers
--hui-radius-616pxExtra-large or expressive surfaces
--hui-radius-full800pxPills, circular avatars, and round indicators

Traditional style

Traditional keeps the same token names but resolves them to softer values. Component code does not need to change.

Traditional Honest UI radius tokens
PreviewTokenValueUse
--hui-radius-18pxSmall controls and subtle corner treatment
--hui-radius-216pxButtons, inputs, menus, badges, and compact cards
--hui-radius-320pxCards and grouped component containers
--hui-radius-424pxDialogs, sheets, and larger surfaces
--hui-radius-532pxLarge panels and prominent containers
--hui-radius-640pxExtra-large or expressive surfaces
--hui-radius-full1600pxPills, circular avatars, and round indicators

Switch styles

 
<!-- Compact corners -->
<html data-theme="light" data-style="modern">

<!-- Softer corners -->
<html data-theme="light" data-style="traditional">

The attribute is not decorative metadata: without a supported data-style value, the radius variables are not defined.

Tailwind usage

 
<article className="overflow-clip rounded-[var(--hui-radius-3)]">
  <img
    alt=""
    className="rounded-[var(--hui-radius-2)]"
    src="/project-cover.jpg"
  />
  <span className="rounded-[var(--hui-radius-full)]">Active</span>
</article>

The class names stay the same when data-style changes; the browser resolves the radius token to the modern or traditional value.

Practical guidance
  • Pick a token by the element's role and reuse it. Similar controls should not have slightly different corners.
  • Keep nested radii visually related. An inner element normally uses the same or a smaller token than its container.
  • Use --hui-radius-full for pills and circles rather than choosing an arbitrarily large number.
  • Radius does not make an element interactive. Preserve visible boundaries, affordances, labels, and focus indicators in both styles.
  • Test clipped focus rings and content near rounded corners. Use the focus-ring offset tokens documented in Effects when a container would otherwise cut the indicator off.