# Φ ToggleBtn

Primitive: A single on/off toggle button with the appearance of the button. Toggles can be set to act the same as a radio button (one selection at a time), or checkboxes (multiple selections). Most often seen in a group of toggle buttons (Toggle - Ctrl), they can however exist as a single button toggle on/off as well.

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

* Parent: [ToggleCtrl](/core/overview/toggle.md)
* Child: [Label](/core/overview/label.md)

## Properties

### Type

<figure><img src="/files/8SprKhI6bcjPSzI7M0xe" alt=""><figcaption></figcaption></figure>

**Text:** The text and text with icon either left or right.

**Icon:** The icon only appearance to a toggle button. This is used in many toolbar situations like with a text editor toolbar.

### Style

The same styles that are possible in the Button element are available here.

<figure><img src="/files/w5TJBqIOEjzAIlGnNeRw" alt=""><figcaption></figcaption></figure>

* Primary
* Secondary
* Light
* Neutral
* Dark

### Status

This property defines if the toggle is set to the "On" or "Off" version. Buttons that have a status of "on" show as fills and those that are "off" have a line outlining the button shape.

**NOTE:** The intent is to NOT have double lines between each ToggleBtn (as is shown in the design file) when they are grouped together. However, this would complicate the design file more than we'd like, so understand that the right side "lines" of the Left and Center "Locations" should be removed to achieve the desired effect of a single 1 dp line between each piece.

### Location

This is primarily for the multi-toggle option to define the left, center, and right toggles, but we also include the appearance of the toggle when a single toggle button is present.

<figure><img src="/files/dWfO6NwCTCR0eDWtor3R" alt=""><figcaption></figcaption></figure>

### Size

We have the need for two sizes in the Toggle, the first **Base** (default) size for most use cases and a shorter one "**Tiny**" for those situations where the Toggle shows up in other fixed height components like in the App Bar.

<figure><img src="/files/7dzbkK4x048Q4MZOE4hM" alt=""><figcaption></figcaption></figure>

### State

<figure><img src="/files/l0u9PvilygmUGn0wpV98" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://able.bucca.com/core/overview/toggle/toggle-pieces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.