Button group

Default density Compact density Restart from the initial state Show the copyable source

Merge Request changes ⋯

Usage

A Button group only arranges and joins its members; each tp-button keeps its full contract, including its own name, disabled state and activation. Give the group a label so assistive technology announces the set. aria-label and aria-labelledby on the group supply authored naming; label is the fallback. Grouping adds no roving focus or selection state.

Sizes

The group does not force a size or variant on its members. Set the same size on every Button when the set should share one height.

Default density Compact density Restart from the initial state Show the copyable source

Archive Report Snooze Archive Report Snooze Archive Report Snooze

Orientation

orientation="vertical" stacks members and moves the seams to the block axis. Members stretch to the widest one; order and keyboard behavior never change. Horizontal groups preserve the first Button’s logical-start corners and the last Button’s logical-end corners. The treatment follows writing direction.

Default density Compact density Restart from the initial state Show the copyable source

+ − Export PDF Export CSV Print

Groups nest. A vertical toolbar can hold several vertical groups, each with its own seams, so related tools read as sets. Hidden members do not participate.

Default density Compact density Restart from the initial state Show the copyable source

Inputs and text

Inputs, selects and toggles can sit next to Buttons and keep their value and form behavior. tp-button-group-text adds a noninteractive prefix or suffix segment. For an associated label, put <tp-label for="amount">Amount</tp-label> inside it and give the editor the matching ID.

Default density Compact density Restart from the initial state Show the copyable source

tweakpad.app/ Send invite

Buttons can sit on either side of an input, and a text segment can hold a real tp-label or a live count.

Default density Compact density Restart from the initial state Show the copyable source

− + Port Star 2,418

Separators

Place a tp-separator between filled members to keep a visible divide; the group orients it perpendicular to the row. An explicitly configured orientation is preserved, and removing the separator restores its previous default. The existing decorative property controls separator semantics; it never becomes an adjustable divider.

Default density Compact density Restart from the initial state Show the copyable source

Copy Paste

The same divide makes a split button: the main action on one side, a Menu of alternatives on the other.

Default density Compact density Restart from the initial state Show the copyable source

Publish Schedule for later Save as draft Share preview link

Menus and popovers

Overlay triggers join the group like any Button, while the Menu or Popover keeps its own focus and dismissal. Menu, Popover and Tooltip participate through their slotted trigger; their popup content is not a member.

Default density Compact density Restart from the initial state Show the copyable source

Share Duplicate Move to… Delete Remind me tomorrow Custom reminder We'll notify you on every device. Set reminder

Selects

Selects and native selects keep their values and submit with the form, so a currency and an amount can share one row.

Default density Compact density Restart from the initial state Show the copyable source

Transfer amount EUR USD GBP Send

days weeks months

Input groups

An Input group can be one member, keeping its addons inside the field’s border. Groups also nest, which suits a message composer with an attachment button and a voice toggle.

Default density Compact density Restart from the initial state Show the copyable source

W px

Links and icon actions

Buttons with href render real links, so history navigation can be a group too. Icon-only members each need an aria-label.

Default density Compact density Restart from the initial state Show the copyable source

← v2.3 v2.5 →

Pagination

Pagination can sit in a group as one member, or split across nested groups that share the same page. A partContracts render delegate draws each link as an outline Button so the seams match. Removing Pagination from the group restores its standalone spacing and corners. For separate numbered and direction groups, nest two Button Groups containing Pagination instances. Configure showPrevious/showNext on the numbered instance and showPageLinks/showLabels on the direction instance, and bind both to the same application page.

Default density Compact density Restart from the initial state Show the copyable source

Unjoined

joined is on by default. Set the joined property to false to keep each Button’s own corners and add the standard gap while keeping the group semantics. joined removes internal corner radii and one boundary from each seam without overlapping hit targets.

Default density Compact density Restart from the initial state Show the copyable source

Cancel Save changes

Button group implies no selection. When the members choose one shared value, such as text alignment, use a Toggle group instead. Its single-selection state and keyboard behavior remain owned by Toggle Group. Its documented spacing="0" uses the shared joined-seam treatment; ordinary gaps and control appearance continue to follow theme tokens.

API Reference

Every element also accepts motion-policy.

<tp-button-group-text>

Related

Components, widgets and patterns that use this one.

Show more

Widget

Text editor

A rich text field on an editing engine your app installs, as a classic toolbar editor or a node editor of blocks.

→