<tyro-ui-button-group>

Button Group

A set of N buttons unified as a single visual control - segmented tabs, period filters, view switchers. Items are passed as an array; the active item is tracked via two-way [(value)] binding.

Lite

Segmented control (3 items)

Classic

Period filter (4 items)

Gradient

Period filter (4 items)

Icon-only

View switcher - icon-only items

5 items

The number of items is configurable

Inputs

Property
Type
Default
Description
[items]ITyroUiButtonGroupItem[][]List of buttons to display (value, label, icon?, disabled?)
[(value)]string-Active button value - two-way binding available
[variant]'lite' | 'classic' | 'gradient''lite'Visual style of the group
[size]'sm' | 'md' | 'lg''md'Size of the buttons in the group

Outputs

Event
Payload
Description
(valueChange)stringEmitted when the user selects a button - provides the item's value

ITyroUiButtonGroupItem

export interface ITyroUiButtonGroupItem {
  value:     string;          // identifiant unique
  label:     string;          // texte affiché (gérer la langue dans le parent)
  icon?:     string;          // classe Remix Icon (optionnel)
  disabled?: boolean;         // désactive l'item
}

Usage

// page.ts
readonly items = computed<ITyroUiButtonGroupItem[]>(() => {
  const en = this.lang() === 'en';
  return [
    { value: 'all',    label: en ? 'All'    : 'Tous'    },
    { value: 'active', label: en ? 'Active' : 'Actif'  },
  ];
});

readonly active = signal('all');

// page.html
<tyro-ui-button-group
  variant="classic"
  [items]="items()"
  [(value)]="active">
</tyro-ui-button-group>