ButtonGroup
The button group component.
Importing
ts
import "@tapsioss/web-components/button-group";ts
import { ButtonGroup } from "@tapsioss/react-components/ButtonGroup";Component Usage
html
<tapsi-button-group></tapsi-button-group>tsx
<ButtonGroup />Properties
| Name | Description | Type | Default Value |
|---|---|---|---|
orientation | Defines the orientation of the button group. | "horizontal" | "vertical" | "horizontal" |
alignment | Sets the alignment of the items within the button group. | "start" | "center" | "start" |
fluid-items | If true, the items in the button group will expand to fill the available space. | boolean | false |
label | Defines a string value that can be used to set a label for assistive technologies. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | string | "" |
Slots
| Name | Description |
|---|---|
button | The slot for buttons. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/button-group";
console.log(Slots.BUTTON); // "button"ts
import { ButtonGroupSlots } from "@tapsioss/react-components";
console.log(ButtonGroupSlots.BUTTON); // "button"