Button Group

<afp-button-group>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A button group component to display multiple buttons together.

Left

Center

Right

<afp-button-group>
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<afp-button-group>
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<AfpButtonGroup>
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

<AfpButtonGroup>
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

Examples #

Variants #

Set variant on the group to apply to all child buttons. Individual buttons can override with their own variant.

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

<div class="afp-grid">
  <div class="afp-stack">
    <afp-button-group variant="neutral">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group variant="brand">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group variant="accent">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group variant="info">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
  <div class="afp-stack">
    <afp-button-group variant="error">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group variant="success">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group variant="warning">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group>
      <afp-button variant="accent">Left</afp-button>
      <afp-button variant="brand">Center</afp-button>
      <afp-button variant="info">Right</afp-button>
    </afp-button-group>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <afp-button-group [variant]="'neutral'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [variant]="'brand'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [variant]="'accent'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [variant]="'info'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
  <div class="afp-stack">
    <afp-button-group [variant]="'error'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [variant]="'success'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [variant]="'warning'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group>
      <afp-button [variant]="'accent'">Left</afp-button>
      <afp-button [variant]="'brand'">Center</afp-button>
      <afp-button [variant]="'info'">Right</afp-button>
    </afp-button-group>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <AfpButtonGroup variant="neutral">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup variant="brand">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup variant="accent">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup variant="info">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
  <div class="afp-stack">
    <AfpButtonGroup variant="error">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup variant="success">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup variant="warning">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup>
      <AfpButton variant="accent">Left</AfpButton>
      <AfpButton variant="brand">Center</AfpButton>
      <AfpButton variant="info">Right</AfpButton>
    </AfpButtonGroup>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <AfpButtonGroup :variant="'neutral'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :variant="'brand'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :variant="'accent'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :variant="'info'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
  <div class="afp-stack">
    <AfpButtonGroup :variant="'error'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :variant="'success'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :variant="'warning'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup>
      <AfpButton :variant="'accent'">Left</AfpButton>
      <AfpButton :variant="'brand'">Center</AfpButton>
      <AfpButton :variant="'info'">Right</AfpButton>
    </AfpButtonGroup>
  </div>
</div>

Shapes #

Set shape on the group to apply to all child buttons.

Left

Center

Right

Left

Center

Right

Left

Center

Right

Left

Center

Right

<div class="afp-grid">
  <div class="afp-stack">
    <afp-button-group shape="pill">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group shape="rounded">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
  <div class="afp-stack">
    <afp-button-group shape="soft">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group shape="square">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <afp-button-group [shape]="'pill'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [shape]="'rounded'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
  <div class="afp-stack">
    <afp-button-group [shape]="'soft'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
    <afp-button-group [shape]="'square'">
      <afp-button>Left</afp-button>
      <afp-button>Center</afp-button>
      <afp-button>Right</afp-button>
    </afp-button-group>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <AfpButtonGroup shape="pill">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup shape="rounded">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
  <div class="afp-stack">
    <AfpButtonGroup shape="soft">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup shape="square">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
</div>

<div class="afp-grid">
  <div class="afp-stack">
    <AfpButtonGroup :shape="'pill'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :shape="'rounded'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
  <div class="afp-stack">
    <AfpButtonGroup :shape="'soft'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
    <AfpButtonGroup :shape="'square'">
      <AfpButton>Left</AfpButton>
      <AfpButton>Center</AfpButton>
      <AfpButton>Right</AfpButton>
    </AfpButtonGroup>
  </div>
</div>

Sizes #

Set size on the group to apply to all child buttons.

Left

Center

Right

Left

Center

Right

Left

Center

Right

<div class="afp-stack">
  <afp-button-group size="small">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
  <afp-button-group size="medium">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
  <afp-button-group size="large">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
</div>

<div class="afp-stack">
  <afp-button-group [size]="'small'">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
  <afp-button-group [size]="'medium'">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
  <afp-button-group [size]="'large'">
    <afp-button>Left</afp-button>
    <afp-button>Center</afp-button>
    <afp-button>Right</afp-button>
  </afp-button-group>
</div>

<div class="afp-stack">
  <AfpButtonGroup size="small">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
  <AfpButtonGroup size="medium">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
  <AfpButtonGroup size="large">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
</div>

<div class="afp-stack">
  <AfpButtonGroup :size="'small'">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
  <AfpButtonGroup :size="'medium'">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
  <AfpButtonGroup :size="'large'">
    <AfpButton>Left</AfpButton>
    <AfpButton>Center</AfpButton>
    <AfpButton>Right</AfpButton>
  </AfpButtonGroup>
</div>

Orientation #

Set orientation to vertical to stack buttons vertically instead of horizontally. The default is horizontal.

Top

Middle

Bottom

<afp-button-group orientation="vertical">
  <afp-button>Top</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Bottom</afp-button>
</afp-button-group>

<afp-button-group [orientation]="'vertical'">
  <afp-button>Top</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Middle</afp-button>
  <afp-button>Bottom</afp-button>
</afp-button-group>

<AfpButtonGroup orientation="vertical">
  <AfpButton>Top</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Bottom</AfpButton>
</AfpButtonGroup>

<AfpButtonGroup :orientation="'vertical'">
  <AfpButton>Top</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Middle</AfpButton>
  <AfpButton>Bottom</AfpButton>
</AfpButtonGroup>

Border #

Set --afp-button-group-border-width to control the border width between buttons.

Left

Center

Right

<afp-button-group style="--afp-button-group-border-width: 0;">
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<afp-button-group [style]="'--afp-button-group-border-width: 0;'">
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<AfpButtonGroup style="--afp-button-group-border-width: 0;">
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

<AfpButtonGroup :style="'--afp-button-group-border-width: 0;'">
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

Disabled #

Set disabled on the group to apply to all child buttons.

Left

Center

Right

<afp-button-group disabled>
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<afp-button-group disabled>
  <afp-button>Left</afp-button>
  <afp-button>Center</afp-button>
  <afp-button>Right</afp-button>
</afp-button-group>

<AfpButtonGroup disabled>
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

<AfpButtonGroup disabled>
  <AfpButton>Left</AfpButton>
  <AfpButton>Center</AfpButton>
  <AfpButton>Right</AfpButton>
</AfpButtonGroup>

Properties

Learn more about properties.

Name Description Reflects

size

Size of buttons

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

disabled

Disabled state applied to child buttons

Type boolean

Default false

variant

variant of buttons

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

shape

shape of buttons

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

label

Label for the button group

Type string

orientation

orientation of button group

Type

AfpOrientation

Name	Description
`HORIZONTAL`	Horizontal layout orientation.
`VERTICAL`	Vertical layout orientation.

AfpOrientation

Default AfpOrientation.HORIZONTAL

Slots

Learn more about slots.

Name	Description
`default`	The default slot for button elements.

Internationalization

Learn more about internationalization.

Key	Description
`button-group.aria-label`	The default `aria-label` text for Button Group

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The button group container wrapper.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-button-group-border-width`	The border width of the button group.	`--afp-border-width-s`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-button

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/button-group/button-group.js';