Skip to content
UI Kit
Accent color

Button components for React and Tailwind

Buttons, groups and toggles.

6 components · 20 variants
Switch category

Six components for every kind of click

Buttons carry every action on a page, so they need a clear order of importance. The six components here share one set of styles and sizes, which means a button in a hero, a dialog and a table all look like they belong together.

Button has five styles from primary to ghost, three sizes, icons and a loading state, plus neutral sign-in buttons without foreign logos. Button group joins buttons into one control or a split button with a menu. Icon button is for actions that are only an icon and requires a label. Toggle covers pressed states and a segmented control, Copy button copies a value and says so, Loading button keeps its width and blocks double clicks.

Use one primary button per view, everything else is secondary or ghost. Write labels as verbs that say what happens, such as Save changes. Links that go somewhere stay links, buttons do something, the components render the right element when you pass href.

On this page

Every component of this category. Pick one to jump to its variants.

button

Button

Five styles, three sizes, icons, loading, groups, icon buttons and neutral sign-in buttons.

Props and details · Button

Styles

One primary action per view, the others step back. A press dips the button and leaves a light where you pressed, the main action follows the mouse a little.

Sizes

Small 36 px, medium 44 px, large 48 px. Medium and large meet the 44 px tap target.

With icons

Icons before name the object, icons after point the way and move a little on hover.

Loading

The spinner turns into a drawn check, the width glides between the texts, an error shakes once. Double clicks are blocked.

Groups

Attached buttons share one border, a split button keeps related actions one click away.

Icon buttons

Square or round, with a required label and an optional count. Press the bell, the count pops.

Neutral sign-in

Full-width options for sign-in, drawn without third-party logos. Add your provider marks where you have the rights.

button-group

Button group

Buttons joined into one control, as a row, a stack or a split button with a menu.

Props and details · Button group

Attached

One shared border, the outer corners round, the inner ones square. A thin accent line glides to the button under the mouse or in focus.

Split button

The likely action in front, the alternatives behind the chevron. The menu works with arrow keys.

Stacked

The same rules on the vertical axis, e.g. for reordering or a side toolbar.

icon-button

Icon button

Buttons that are only an icon, with a required label, four sizes, five styles and a count.

Props and details · Icon button

Styles and sizes

Small sizes keep a 44 px hit area through an invisible edge.

Count and dot

The count is part of the accessible name, a dot marks something new. Counts pop in and pop again when they change, press the first bell.

In context

A file row with quiet actions and tooltips that name each one.

toggle

Toggle

Buttons that stay pressed, toggle groups for one or many values and a segmented control with a sliding thumb.

Props and details · Toggle

Segmented

One value from a few. The thumb slides with a light overshoot, arrow keys move it, the group is one tab stop.

Toolbar

Several values at once for formatting, one value for alignment with a sliding mark. Try it, the sentence follows.

Single toggles

One button, two states, announced with aria-pressed. Ghost or outline.

copy-button

Copy button

Copies a value with one click, the icon turns into a check and a live region announces it.

Props and details · Copy button

Buttons

As an icon or with text. The copy icon turns away, the check draws itself, the words swap upward without a jump.

Copy fields

Read-only values with a copy button for links, keys, commands and bank details. A light runs over what was copied.

loading-button

Loading button

A button that shows it is working, keeps its width, blocks double clicks and reports success or failure.

Props and details · Loading button

States

Idle, loading with or without text, success and error. The spinner closes into a drawn check, errors say what to do next.

With a promise

onClick returns a promise, the button follows it on its own. The width glides between the texts, a failure shakes once. Click to try both outcomes.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Buttons on a page.

Often searched

Jump to

Copied to the clipboard