Ghost button or filled, when does each fit the hierarchy?

Published Read 3 min read

On this page

Fill the primary action and ghost the secondary, because a filled button carries visual weight that signals importance while a ghost or outline button reads as the lower-commitment, supporting choice. The styles are a language for hierarchy, and the rule is that weight should follow priority. When one action matters more than the others around it, its styling should say so, and two actions of unequal importance should never sit at equal visual weight. The choice between ghost and filled is not a matter of taste, it is how the interface tells the user which path is the main one.

The reasoning is that users read visual prominence as a recommendation. A solid fill of color advances toward the eye, looks substantial, and reads as “this is the thing to do,” which is exactly the signal a primary action wants. A ghost button, all outline or faint background, recedes, presents itself as available but not urged, and so suits a secondary or cautious choice the user might take but is not being pushed toward. The “use ghost buttons everywhere because they look sleek” habit throws this language away, flattening every action to the same quiet weight, and the cost is that the user can no longer tell the main action from the alternatives at a glance. A page where everything whispers gives no more guidance than a page where everything shouts.

Consider a dialog with two choices side by side. “Save changes” and “Cancel” are not peers: saving is the action the user came to take, canceling is the escape hatch. Filling “Save changes” and ghosting “Cancel” instantly communicates which is which, so the eye lands on the primary path and the secondary one stays clearly available without competing for the same glance. Style both as identical ghost buttons and the user has to stop and read carefully to find the action they want, every time, because the styling has refused to do any of the sorting for them. The weight difference does the wayfinding that matching styles refuse to do, and it does it before a single word is read, which is why a well-built form lets a returning user act on muscle memory rather than re-reading the buttons on every visit.

Where this breaks down is that the pairing only carries meaning when actions genuinely differ in priority, and not every screen has a single dominant action. A choice between two truly equal options, where neither is the recommended path, can legitimately present them at matching weight, because forcing a fake hierarchy onto equal choices steers the user toward a preference you do not actually hold and is its own distortion. There is also a limit on how many filled buttons a view can carry, since filling several actions at once recreates the flat-weight problem from the other direction, so a screen with one clear primary fills exactly one and ghosts the rest. The point is that weight should encode real priority, so when priority exists you express it, and when it genuinely does not, you do not manufacture it. Contrast and accessibility still apply to both styles, since a ghost button too faint to perceive fails regardless of its place in the hierarchy, and a faint outline that disappears against the background is a usability defect no amount of correct hierarchy can excuse.

When you place two or more buttons together, decide which action is primary and fill it, then ghost the supporting ones so their weight matches their lower priority. Avoid styling everything as ghosts for the sleek look, because erasing the difference erases the guidance. Reserve equal weight for genuinely equal choices. Let weight follow priority, and the buttons themselves will tell the user where to go.

Related posts:

  1. Why does a desktop layout that “just stacks” usually feel broken on mobile? A desktop layout feels broken when it just stacks because stacking preserves an order and a spacing that were both tuned for width, and a narrow screen strips away the......
  2. How much whitespace is too much before a layout feels empty instead of intentional? Whitespace becomes too much the moment it stops doing a job. The tipping point is not a pixel value, a margin token, or a percentage of the viewport. It is......
  3. How small can a caption get before it becomes unreadable on a phone? A caption has a practical floor on a phone of around fourteen pixels, and dropping much below that strains the eye no matter how clean the type looks. Useful as......
  4. Why does a card layout sometimes hurt scannability instead of helping? A card layout hurts scannability when everything becomes a card, because the border, padding, and shadow that define a card all add visual weight, and once that weight surrounds every......
  5. When is auto-playing content an accessibility problem vs fine? Auto-playing content becomes an accessibility problem when it moves, sounds, or changes for more than a moment with no easy way to pause or stop it, and it is fine......
  6. Should a hover effect change instantly or ease in? Use a short ease, not a hard snap and not a slow fade. A brief transition on hover, roughly 100 to 200 milliseconds, feels smoother and more deliberate than an......
  7. Why do stock photos often make a design feel less trustworthy? Stock photos often make a design feel less trustworthy because generic, obviously staged imagery reads as inauthentic, and a viewer who recognizes it instantly registers it as filler that says......
  8. How do you animate a state change so it reads as cause and effect? You make a state change read as cause and effect by connecting the trigger to the result through continuity, of position, of shape, or of motion, so the user watches......
  9. How do you design a pricing table that moves people to decide instead of stalling? A pricing table moves people to decide by reducing the cognitive load of comparison: limit the options to a comparable few, make the differences between them scannable at a glance,......
  10. How do you choose between a photo, an illustration, and an abstract graphic? Choose by the job the visual has to do, not by what style is trendy. A photo suits realism and human connection, the moments when you need the viewer to......
  11. How do you keep a growing component library from becoming bloated? A component library stays lean only through ongoing curation: new components are added against real need, near-duplicates are merged, unused ones are retired, and variants are governed rather than allowed......
  12. How consistent do icons need to be in a set before inconsistency shows? An icon set reads as one family only when its shared visual properties hold across every icon at once: stroke weight, corner style, optical size, and level of detail. Inconsistency......
  13. How do you hand off responsive behavior the mockups don’t capture? You hand off responsive behavior by specifying how the layout adapts across the full range of widths, what reflows, what hides, what scales, what reorders, and at which points, along......

Leave a comment

Your email address will not be published. Required fields are marked *