ButtonGroup

Displays multiple buttons in a layout.

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: Label for the button group that describes the content of the group for screen reader users to understand what's included.
Anchor to gap gap "base" | "none": The gap between elements.

ButtonGroup

accessibilityLabel
Label for the button group that describes the content of the group for screen reader users to understand what's included.
```
string
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
gap
The gap between elements.
```
"base" | "none"
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class ButtonGroup
  extends PreactCustomElement
  implements ButtonGroupProps
{
  accessor gap: ButtonGroupProps['gap'];
  accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-button-group>

<s-button>Cancel</s-button>

<s-button variant="primary">Save</s-button>

</s-button-group>

examples

Code

<s-button-group>
  <s-button>Cancel</s-button>
  <s-button variant="primary">Save</s-button>
</s-button-group>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-button-group>
  <s-button>Cancel</s-button>
  <s-button variant="primary">Save</s-button>
</s-button-group></body></html>

ButtonGroup

Anchor to propertiesProperties

ButtonGroup

ClickOptions

ActivationEventEsque

examples

Code

Preview