> For the complete documentation index, see [llms.txt](https://able.bucca.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://able.bucca.com/core/overview/toggle/toggle-pieces.md).

# Φ 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.