<tyro-ui-button-group>

Groupe de boutons

N boutons réunis en un seul contrôle visuel - onglets segmentés, filtres de période, sélecteur de vue. Les items sont passés en tableau ; l'item actif est géré via la liaison bidirectionnelle [(value)].

Lite

Contrôle segmenté (3 items)

Classic

Filtre de période (4 items)

Gradient

Filtre de période (4 items)

Icônes seules

Sélecteur de vue - items icônes seules

5 items

Le nombre d'items est configurable

Inputs

Propriété	Type	Défaut	Description
`[items]`	`ITyroUiButtonGroupItem[]`	`[]`	Liste des boutons à afficher (value, label, icon?, disabled?)
`[(value)]`	`string`	`-`	Valeur du bouton actif - two-way binding disponible
`[variant]`	`'lite' \| 'classic' \| 'gradient'`	`'lite'`	Style visuel du groupe
`[size]`	`'sm' \| 'md' \| 'lg'`	`'md'`	Taille des boutons du groupe

Outputs

Événement	Payload	Description
`(valueChange)`	`string`	Émis quand l'utilisateur sélectionne un bouton - fournit la value de l'item

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
}

Utilisation

// 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>