# ε ToggleBar

Element: A collection of toggles with layout padding and behaviors. The bar component can have different background surfaces (colors) so we don't include a surface here.

[Styleguide Link](https://zpl.io/adyA535)

* Parent: [App Bar - Ext.](https://able.bucca.com/core/components/app-bar/app-bar-ext), [Form > Toggle Button](https://able.bucca.com/core/components/form/togglebutton)
* Child: [Toggle - Ctrl](https://able.bucca.com/core/overview/toggle)

## Properties

### Layout Types

The options available in the "Toggle" element are capable here.

**Solo** - A grouping of solo toggles. An example of this could be different filters on a search, where each toggle is a different filter type (price, weight, rating, etc.)

**Group** (default)- When the toggle buttons are pushed together and are presented as a grouping of buttons. By default, this type exists as a singular choice (toggle on) from the group, but can function as a multi-select button as well. An example of this would be with a text editor grouping with bold, italic, underline where none or all of the groups options can be selected.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FWc0uNqFQcXe6XcEKmfZ9%2FToggle%20Bar.png?alt=media&#x26;token=807a6741-8525-4749-a83b-8c92637769d0" alt=""><figcaption></figcaption></figure>

### Style

* Text (default)
* Icon

### Behavior

* **Fixed** (default)- New toggles that don't fit within the fixed width, wrap to the next row, growing the height of the bar - toggle.
* **Scroll** - Toggles that don't fit within the defined width of the parent container scroll off the side of the bar - toggle (screen).