About this block

Underline Buttons shows five button variants side by side in a centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Each button carries a thin two-pixel underline that is hidden at rest and sweeps in from the left edge on hover, scaling across the full inner width of the label in a smooth transition.

Every variant is self-contained, so you can pull in only the ones that match your interface. The label text, the set of variants you keep, and the order they appear in are all straightforward to adjust without affecting the animation behavior on the others.

When to use

Reach for this block when you want quiet motion on secondary or tertiary actions in an HR or hiring platform, such as candidate profile links, navigation items in an applicant tracking sidebar, or inline form controls that sit near denser content. The sweep animation is subtle enough that it does not compete with a primary filled button, making it a good companion to bolder calls to action on the same page.

A natural flow around it on a Components page:

Before

• Extra Large Buttons to establish the primary call to action before quieter variants appear
• Badges to label a section or status before offering actions beneath it

After

• Ghost Buttons via the Buttons group for more minimal button options that pair well with this understated style
• Cards where these buttons can serve as inline actions within each card

What you can customize

The five variants cover the standard button roles, but you can trim or rearrange the set to fit your context:

• Variant selection. Keep only the variants your page needs. A hiring portal might use Default for primary actions and Ghost for dismissals, dropping Destructive entirely from that surface.
• Label copy. Replace the demo labels with your real action text such as Save Profile, Review Application, or Archive, and the underline animation scales to fit the new width automatically.
• Placement in context. The wrapping row works in an isolated demo, but each button drops cleanly into a toolbar, form footer, or data table row wherever a low-profile action is needed.

Tip: pair the Ghost variant with icon-only labels in tight toolbars so the underline gives hover feedback without adding visual weight.