DocsComponentsButton group

Button group

Joins buttons into one control.

depends on button1 file

<pb-ui.button-group>
  <pb-ui.button variant="outline">Archive</pb-ui.button>
  <pb-ui.button variant="outline">Report</pb-ui.button>
  <pb-ui.button variant="outline">Delete</pb-ui.button>
</pb-ui.button-group>

Installation

pyblade-ui add button-group

Install the dependencies
button.

Copy this file into your project

components/ui/button_group.html

@props({'orientation': 'horizontal'})
<div role="group" data-slot="button-group" data-orientation="{{ orientation }}" {{ attributes.cn(
    "flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
    {
        'horizontal': '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        'vertical': 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
    }[orientation],
) }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.button-group> is available in all your templates.

<pb-ui.button-group>
  <pb-ui.button variant="outline">Archive</pb-ui.button>
  <pb-ui.button variant="outline">Report</pb-ui.button>
</pb-ui.button-group>

Examples

Vertical

<pb-ui.button-group orientation="vertical">
  <pb-ui.button variant="outline" size="sm">Top</pb-ui.button>
  <pb-ui.button variant="outline" size="sm">Middle</pb-ui.button>
  <pb-ui.button variant="outline" size="sm">Bottom</pb-ui.button>
</pb-ui.button-group>

With an input

Props

Prop	Default
orientation	'horizontal'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Button link Toggle ›