# Button Panel

Component: A collection of buttons vertically or horizontally displayed with padding and elevation

[Styleguide Link](https://app.zeplin.io/styleguide/60470191ec4e65a27a43e21c/components?cseid=604e5635eda5f48a6895f219)

* Child: [Button](/core/overview/button.md)

### Properties

<div><figure><img src="/files/xSEpx69WNkJ3wvlWwRWe" alt=""><figcaption></figcaption></figure> <figure><img src="/files/KvCK4KnE7EH1KtkQE5KN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UFQfjXtZo3utr2eJaw7x" alt=""><figcaption></figcaption></figure></div>

**Qty** - The number of buttons contained within the panel

**Orientation** - The direction that the buttons are situated in the panel, stacked on top of one another vertically, or aligned side-by-side horizontally.

**Padding** - An On/Off toggle to have no padding or to apply padding. Generally only square buttons will not have padding, and others (even square) will have padding.

**Elevation** - An On/Off toggle to determine if the panel should have an elevation applied to it. This comes in handy with dock to bottom button panels that have scrollview lists that flow behind them.

**State** - The possible visual appearances, which are also tied to functionality of the given object. ie Disabled and the object can not be interacted with and visually shows that. States are handled within each of the individual buttons contained within the panel, but we will want a parent child relationship at the panel level to inform the child buttons on a state change.


---

# 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/components/button-panel.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.