Button Group

Fuses buttons, inputs and text addons into one control.

import { … } from '@inlaylab/ivorie/button-group'

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-group',
  imports: [IV_BUTTON_GROUP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-button-group aria-label="Text style">
      <button ivButton variant="outline">Bold</button>
      <button ivButton variant="outline">Italic</button>
      <button ivButton variant="outline">Underline</button>
    </iv-button-group>
  `,
})
export default class ButtonGroupDemo {}

Installation

CLI

npm

npx ivorie add button-group

import { … } from '@inlaylab/ivorie/button-group'

Adjacent borders collapse and inner radii are removed. Works horizontally or vertically.

Usage

import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';

<iv-button-group>
  <button ivButton variant="outline">Bold</button>
  <button ivButton variant="outline">Italic</button>
</iv-button-group>

Examples

Vertical

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-group-vertical',
  imports: [IV_BUTTON_GROUP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-button-group orientation="vertical" aria-label="Alignment">
      <button ivButton variant="outline">Top</button>
      <button ivButton variant="outline">Middle</button>
      <button ivButton variant="outline">Bottom</button>
    </iv-button-group>
  `,
})
export default class ButtonGroupVerticalDemo {}

Text addon

Page

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-group-text',
  imports: [IV_BUTTON_GROUP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-button-group>
      <iv-button-group-text>Page</iv-button-group-text>
      <button ivButton variant="outline">1</button>
      <button ivButton variant="outline">2</button>
      <button ivButton variant="outline">3</button>
    </iv-button-group>
  `,
})
export default class ButtonGroupTextDemo {}

Separator

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-group-separator',
  imports: [IV_BUTTON_GROUP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-button-group>
      <button ivButton variant="secondary">Cut</button>
      <iv-button-group-separator />
      <button ivButton variant="secondary">Copy</button>
      <iv-button-group-separator />
      <button ivButton variant="secondary">Paste</button>
    </iv-button-group>
  `,
})
export default class ButtonGroupSeparatorDemo {}

Nested

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_BUTTON_GROUP_IMPORTS } from '@inlaylab/ivorie/button-group';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-group-nested',
  imports: [IV_BUTTON_GROUP_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-button-group>
      <iv-button-group>
        <button ivButton variant="outline">B</button>
        <button ivButton variant="outline">I</button>
      </iv-button-group>
      <button ivButton variant="outline">Clear</button>
    </iv-button-group>
  `,
})
export default class ButtonGroupNestedDemo {}

API

Every part also accepts class.

iv-button-group

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction and the axis where borders collapse.

iv-button-group-text

No inputs besides class. Muted text or icon addon.

iv-button-group-separator

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	`vertical` is a thin vertical bar. Use `horizontal` inside a vertical group.

Accessibility

iv-button-group has role="group". Give it an aria-label to name the group. iv-button-group-separator has role="none" (decorative). Focused children are raised so the focus ring is not clipped.

Notes

Children need a border for the fusion to show. Use variant="outline" buttons. ghost buttons have no border.
Pair iv-button-group-text with outline buttons so borders line up.
Nested groups get a gap automatically.