Components
Button Anatomy
Button anatomy is the set of parts a button is made of — label, container, padding, and radius — each adjustable on its own to get the size and tone you want.
Definition
A button looks simple, but it's really a few small parts stacked together. In the middle sits the label, the text that tells people what the button does. Wrapping that label is the container, which gives the button its shape through a background color, a border, and rounded corners. The padding between the label and the edge of the container gives the text room to breathe, and at the same time it decides how big the clickable or tappable area is. Sometimes an icon or a loading spinner joins the mix, but the skeleton is always these three parts. Once you can look at each one on its own, the label, the container, and the padding, you can shape any button to the exact size and tone you want. And when a button feels off, you can point to the specific part causing it instead of guessing.
Why does it matter?
The button is one of the most-clicked things on any screen, and it's the starting point for getting something done. That means how easy a button is to press, and how important it looks, feed directly into how usable your product feels. If the padding leaves the clickable area too small, people miss it again and again and quickly get frustrated. A screen also usually holds several buttons at once, and if every one of them looks equally strong, nobody can tell which to press first. When you vary the form, using a filled button, a button with only a border, or a button with no background or border at all, a natural hierarchy appears, and people's eyes are drawn to the action that matters most.
Common mistakes
- Making the clickable area too small. If you give the text almost no padding, the button shrinks and becomes hard to hit accurately, especially on mobile. To keep it comfortable for a fingertip, aim for a touch target of around 44px.
- Putting several of your strongest buttons on the same screen. When high-emphasis, filled buttons are scattered across a screen, they all look equally important, so it's unclear what to press first and the hierarchy falls apart.
- Giving each button its own padding, corner radius, and color. When buttons on the same screen look subtly different, the result feels untidy, and people have to re-read each one from scratch even when it's the same kind of action.
Practical tips
- Split your button forms by importance. Use a filled solid button for the main action on a screen, an outline button (border only) for secondary actions, and a ghost button (text only, no background) for weak actions like cancel. As a default rule, keep just one solid button per screen.
- Give the padding room so the clickable area lands at roughly 44px or more. Even when the visible text is small, a larger pressable range cuts down mis-taps dramatically.
- Don't set a button's padding, radius, and color one by one. Standardize them with shared tokens so a button looks the same by the same rules no matter which screen you drop it on.