Button groups

Basic button groups

Create basic button groups with the <ax-btn-group> element wrapping <ax-btn> tags.

<ax-btn-group>
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

Button group sizes

Change the button group component size using the size property.

<ax-btn-group size="small">
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

<ax-btn-group size="large">
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

Vertical button groups

Create vertical button groups using the vertical property.

<ax-btn-group vertical>
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

Button group style

Style your buttons using utilities directly on the <ax-btn-group> element.

<ax-btn-group vertical class="rounded-1 shadow-1">
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

<ax-btn-group class="rounded-1 shadow-1">
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
  <ax-btn class="primary">Button</ax-btn>
</ax-btn-group>

Outline button groups

Create outline button groups using outline <ax-btn> elements.
To create outline buttons, refer to the foo page.

<ax-btn-group class="rounded-1">
  <ax-btn outline class="text-primary">Button</ax-btn>
  <ax-btn outline class="text-primary">Button</ax-btn>
  <ax-btn outline class="text-primary">Button</ax-btn>
</ax-btn-group>