The ButtonGroup component can be used to group related buttons.
Below you can view various demos with example markup.
All the standard button variants are supported.
<.button_group variant="contained">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group variant="outlined">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group variant="text">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
The button group can be displayed vertically using the orientation attribute.
<.button_group orientation="vertical">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group
orientation="vertical"
variant="outlined"
>
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group
orientation="vertical"
variant="text"
>
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
The size attribute can be used to control the appearance of the button group.
<.button_group size="sm">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group
size="md"
variant="outlined"
>
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group
size="lg"
variant="text"
>
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
The color attribute can be used to control the appearance of the button group.
<.button_group color="red">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group color="green">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
<.button_group color="purple">
<:button>
One
</:button>
<:button>
Two
</:button>
<:button>
Three
</:button>
</.button_group>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.ButtonGroup, only: [button_group: 1]
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| color | any tailwind color | blue | Any Tailwind-supported color. |
| element | any HTML element | div | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | |
| square | bool | false | if true, has square edges |
| variant | "contained" | "outlined" | "text" | contained |