The Button Taxonomy

Why This Exists

Every design system begins with a button. And every button is, beneath its color, a set of structural decisions: how round, how heavy, how much air, how much voice. These decisions carry meaning — they signal brand posture, establish visual rhythm, and shape the way a user feels about an interface before they ever read a word.

This document strips away color and gradient to isolate the variables designers actually control when constructing a button primitive. It draws on current practice from leading design systems — Carbon, Material, shadcn/ui, Apple HIG, Vercel's Geist — and on the research that explains why certain shapes, proportions, and typographic treatments communicate what they do.

The goal is not comprehensiveness. It is focus. The best modern button design is defined by restraint: fewer variations, each one intentional. What follows is a taxonomy of the options worth considering, organized by the design variable at play, and concluded with a set of named archetypes.

I. Shape

The border-radius of a button is its most immediately visible structural decision. Research into the Bouba/Kiki effect — the well-documented tendency for humans to associate rounded forms with softness and approachability, and angular forms with sharpness and precision — gives us a psychological framework for understanding why this single property carries so much weight.

What Shape Communicates

II. Depth

Shadow and elevation tell the user whether a button sits on the surface, above it, or within it. The 2020s saw a full arc from pure flatness through neumorphism's soft extrusion and back toward what current practice calls "intentional depth" — shadows deployed sparingly and purposefully, not decoratively.

In 2026, the consensus approach is modest: a slight lift to signal interactivity, with shadow reserved for primary actions or floating controls. Neumorphism's contribution was making designers think about shadow as a signal of tactile affordance; its failure was making every element look the same.

Practical Guidance

Flat is the safest default. It requires no shadow management across themes, works in dense UIs without visual noise, and is the most accessible option since contrast is purely between fill and background.

Lifted (1–3px blur, low opacity) is the modern workhorse. It adds just enough dimension to communicate "this is interactive" without competing with content. Most current design systems use this level or less.

Hard shadow (offset with zero blur) is a deliberate stylistic choice — graphic, playful, retro. It signals a designed, opinionated interface and works best in branded marketing contexts rather than dense application UIs.

Soft depth (neumorphic-adjacent) remains niche. The dual-shadow technique is beautiful in isolation but creates hierarchy problems at scale, since every element competes for the same visual language. Use it for standalone controls, not system-wide buttons.

III. Fill & Weight

The fill mode of a button — solid, outlined, ghost, or tinted — is the primary tool for establishing action hierarchy. Nearly every modern design system uses a three-tier model: primary (solid), secondary (outlined or tinted), and tertiary (ghost or text-only). The visual weight of the fill directly maps to the importance of the action.

The Hierarchy Ladder

Solid commands attention. It is the call to action. One solid button per view is the general rule — more than that and the hierarchy collapses.

Outlined is the classic secondary. The border gives it enough presence to be found, but its transparent interior defers to the solid primary. Border weight matters here: a 1px border is subtle and modern; 2px is more assertive and legible at distance.

Tinted (a light, semi-transparent fill) is an increasingly popular alternative to outlined for secondaries. It avoids the visual clutter of borders in dense layouts and maintains a softer presence. Shadcn/ui and Apple both favor this approach.

Ghost relies on typography alone. Without hover, it is barely distinguishable from plain text — which is the point. It communicates "this action exists, but you probably don't need it right now."

IV. Border

Independent of fill, the border itself is a design variable with its own communicative range. Border weight, style, and relationship to the button's radius all contribute to perceived formality and visual density.

Hairline borders (0.5–1px) suggest precision and sophistication. They are the default in systems like Linear, Vercel, and Apple's more restrained moments. Medium borders (1.5–2px) are the backbone of outlined buttons in Material Design and Carbon. Heavy borders (3px+) enter graphic territory — they make a statement, and that statement is usually confidence or playfulness.

Consider also the underline button — a text link with a bottom border — which is a valid button treatment for inline or contextual actions:

V. Typography

The typographic treatment of button text carries as much communicative weight as the shape of the container. Four independent variables are at play: case, weight, size, and tracking (letter-spacing). Each has well-documented effects on readability, tone, and perceived authority.

Case

Sentence case is the current industry standard. Carbon, Apple, Vercel, and shadcn/ui all use it. It reads naturally, scans quickly, and creates word shapes that aid recognition. It feels conversational and accessible.

Uppercase was the Material Design default for years and remains popular in contexts that benefit from its visual uniformity — the rectangular alignment of capitals creates a tidier text block within the button container. It requires increased letter-spacing (0.05–0.12em) and a slightly reduced font size to maintain readability. Best for short labels.

Lowercase is an emerging aesthetic choice in 2025–2026 design, particularly in creative and editorial interfaces. It signals informality and an anti-corporate posture.

Small caps offer a middle ground: the visual tidiness of uppercase with less of its "shouting" quality. Underused in digital design, they work well in editorial and luxury contexts.

Weight

Most modern design systems land between 500 (medium) and 600 (semibold) for button text. Medium is the current sweet spot: substantial enough to signal interactivity, light enough to avoid heaviness. Bold suggests urgency; light suggests refinement. The weight of your button text should create just enough contrast with your body copy to feel distinct, but not so much that it dominates.

VI. Proportion

Padding determines how a button breathes. The ratio of horizontal to vertical padding shapes its visual proportions, and by extension, the density and cadence of the entire interface. A common rule of thumb: horizontal padding should be roughly 1.5–2× the vertical padding. But the best buttons don't follow rules — they follow context.

Padding Ratio

Compact buttons suit data-dense interfaces — tables, toolbars, inline controls. They prioritize spatial efficiency over comfort.

Standard is where most systems land for default buttons. Comfortable to read, adequate touch target, works in most contexts.

Generous and Airy proportions convey breathing room and premium quality. Marketing pages, hero sections, and onboarding flows benefit from this treatment. The increased padding also improves the visual weight of the button, making it a stronger focal point.

VII. Size Scale

Most design systems offer 3–5 button sizes. The best approach sizes the button by scaling the font-size and deriving all other dimensions (padding, border-radius, icon size) in relative units, so that every size maintains the same visual proportion.

VIII. Icons

Icons in buttons serve one of two purposes: they either reinforce the text label (redundant but supportive) or they replace it entirely (icon-only buttons). In both cases, the icon should be sized to match the cap-height or x-height of the label text, and spaced consistently using the button's internal gap token.

Leading icons support the label with a visual anchor — they work best for actions that have strong iconographic conventions (add, search, download). Trailing icons typically indicate directionality or expansion (arrows, chevrons, external-link). Icon-only buttons require accessible labels (aria-label) and should ideally provide a tooltip on hover.

IX. The Archetypes

The variables above don't exist in isolation — they compose. What makes a button feel "like Linear" versus "like Notion" versus "like Apple" is the specific combination of shape, depth, fill, type treatment, and proportion. Below are eight named archetypes that represent coherent, tasteful compositions of these variables. Each is a starting point for a design system, not a prescription.

X. Making the Choice

When defining button primitives for a new design system, the decisions cascade in a natural order. The first three decisions are structural and should be locked before exploring variation:

1. Shape — What is your brand's relationship to warmth? Pick a single radius value and commit. If unsure, 8px is the safest modern default.

2. Fill hierarchy — Define your primary/secondary/tertiary model. Decide whether your secondary uses outline or tint, and whether ghost is truly part of your system or just a convenience.

3. Proportion — Choose your default padding ratio (the relationship of vertical to horizontal space) and derive your size scale from it using relative units.

After these three, the remaining decisions — type case, font weight, shadow, border weight, icon rules — are refinements that tune the personality without changing the structure.

XI. What the Best Systems Avoid

As important as what goes in is what stays out. From surveying leading systems and the broader discourse on button design in 2025–2026, a few recurring pitfalls emerge:

Variant proliferation. If your button component accepts more than 5–6 props, the abstraction is leaking. Shadcn/ui's approach — a handful of variants managed through CVA (class-variance-authority) — is instructive: each variant is a named, coherent state, not a combinatorial explosion of booleans.

Inconsistent radius. If your buttons are 8px but your cards are 12px and your inputs are 4px, the interface will feel assembled rather than designed. Modern systems tie radius to a shared token.

Shadow as decoration. If your button has shadow but your card doesn't, or vice versa, the shadow loses its meaning as a signal of interactivity or elevation.

Uppercase by default. Material Design's early uppercase buttons influenced a generation of systems, but the consensus has shifted. Sentence case reads faster, localizes better, and feels less aggressive. Reserve uppercase for specific, intentional moments.

Ignoring the focus state. The most overlooked button property is what happens when a keyboard user tabs to it. A visible, high-contrast focus ring — typically a 2–3px ring offset from the button — is non-negotiable for accessibility, and should be designed, not defaulted.