npm package: @ng-zi/extensions-button-toggle
Description: Angular Material Extensions for button-toggle
Latest version: 0.0.1

## MtxButtonToggle Component Overview

The `MtxButtonToggle` component is a wrapper around Angular Material's button toggle component. It provides enhanced features and additional customization options, ensuring seamless integration and usage within your Angular applications.

#### Basic Button-Toggles

Button toggles can be used to group related options. A button toggle consists of a single button toggle and can be grouped together in a button toggle group.

```html
<mtx-button-toggle-group name="fontStyle" aria-label="Font Style">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>
```

#### Exclusive Selection

When `appearance` is set to `standard`, the button toggles within the group behave as radio buttons, where only one button can be selected at a time.

```html
<mtx-button-toggle-group name="alignment" aria-label="Text alignment" appearance="standard">
  <mtx-button-toggle value="left">Left</mtx-button-toggle>
  <mtx-button-toggle value="center">Center</mtx-button-toggle>
  <mtx-button-toggle value="right">Right</mtx-button-toggle>
  <mtx-button-toggle value="justify">Justify</mtx-button-toggle>
</mtx-button-toggle-group>
```

#### Multiple Selection

When `appearance` is set to `legacy`, the button toggles behave as checkboxes, allowing multiple selections.

```html
<mtx-button-toggle-group name="textFormatting" aria-label="Text formatting" appearance="legacy">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>
```

#### Vertical Button Toggle Group

Button toggle groups can be displayed vertically by setting the `vertical` input to `true`.

```html
<mtx-button-toggle-group vertical>
  <mtx-button-toggle value="left">Left</mtx-button-toggle>
  <mtx-button-toggle value="center">Center</mtx-button-toggle>
  <mtx-button-toggle value="right">Right</mtx-button-toggle>
  <mtx-button-toggle value="justify">Justify</mtx-button-toggle>
</mtx-button-toggle-group>
```

#### Appearance Variants

The `MtxButtonToggle` component supports various appearance options to match different design requirements. The `appearance` input can be set to `legacy` or `standard`.

```html
<mtx-button-toggle-group appearance="legacy">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>
```

#### Customizing the Theme

You can customize the theme of the `MtxButtonToggle` component by using Angular Material’s theming capabilities. This allows you to create a consistent look and feel across your application.

```scss
@use '@angular/material' as mat;

.mt-button-toggle-theme {
  @include mat.button-toggle-theme($primary);
}
```

### Additional Features

- **Custom Icons**: Use custom icons for toggle buttons.
- **ARIA Support**: Enhanced accessibility features with ARIA roles and attributes.
- **Animations**: Smooth transitions and animations for better user experience.
- **Responsive**: Fully responsive design that adapts to various screen sizes.

For more details on configuration options and advanced usage, refer to the API documentation.