Tungsten UI 💡

Tungsten UI 💡

Button Group

A container component for grouping related buttons together with seamless visual connection. 

<c-button-group>
    <c-button variant="outline" >Left</c-button>
    <c-button variant="outline" >Center</c-button>
    <c-button variant="outline" >Right</c-button>
</c-button-group>

Component API

c-button-group

Property Type Default Description
class string - Additional CSS classes for the button group container

Important

Each button inside the group must include the join-item class to properly connect with adjacent buttons.

Examples

Different Variants

Button groups work with all button variants for different visual styles.

Primary Buttons

Outline Buttons

Ghost Buttons

Secondary Buttons

<!-- Primary buttons -->
<c-button-group>
    <c-button variant="primary" >Create</c-button>
    <c-button variant="primary" >Edit</c-button>
    <c-button variant="primary" >Delete</c-button>
</c-button-group>

<!-- Outline buttons -->
<c-button-group>
    <c-button variant="outline" >Day</c-button>
    <c-button variant="outline" >Week</c-button>
    <c-button variant="outline" >Month</c-button>
    <c-button variant="outline" >Year</c-button>
</c-button-group>

<!-- Ghost buttons -->
<c-button-group>
    <c-button variant="ghost" >Left</c-button>
    <c-button variant="ghost" >Center</c-button>
    <c-button variant="ghost" >Right</c-button>
    <c-button variant="ghost" >Justify</c-button>
</c-button-group>

With Icons

Button groups with icons for better visual communication and functionality.

Text Formatting

Media Controls

File Operations

View Options

<!-- Text formatting -->
<c-button-group>
    <c-button variant="outline" icon="bold" ></c-button>
    <c-button variant="outline" icon="italic" ></c-button>
    <c-button variant="outline" icon="underline" ></c-button>
    <c-button variant="outline" icon="strikethrough" ></c-button>
</c-button-group>

<!-- Media controls -->
<c-button-group>
    <c-button variant="primary" icon="skip-back" ></c-button>
    <c-button variant="primary" icon="play" >Play</c-button>
    <c-button variant="primary" icon="pause" >Pause</c-button>
    <c-button variant="primary" icon="skip-forward" ></c-button>
</c-button-group>

<!-- View options -->
<c-button-group>
    <c-button variant="ghost" icon="list" ></c-button>
    <c-button variant="ghost" icon="grid" ></c-button>
    <c-button variant="ghost" icon="table" ></c-button>
    <c-button variant="ghost" icon="kanban-square" ></c-button>
</c-button-group>

Vertical Groups

Create vertical button groups using DaisyUI's join-vertical class.

Navigation Menu

Action Toolbar

<!-- Navigation menu -->
<c-button-group class="join-vertical">
    <c-button variant="outline" icon="home" class="join-item justify-start">Dashboard</c-button>
    <c-button variant="outline" icon="users" class="join-item justify-start">Users</c-button>
    <c-button variant="outline" icon="settings" class="join-item justify-start">Settings</c-button>
    <c-button variant="outline" icon="log-out" class="join-item justify-start">Logout</c-button>
</c-button-group>

<!-- Action toolbar -->
<c-button-group class="join-vertical">
    <c-button variant="primary" icon="plus" >Add Item</c-button>
    <c-button variant="secondary" icon="edit" >Edit</c-button>
    <c-button variant="secondary" icon="copy" >Duplicate</c-button>
    <c-button variant="error" icon="trash" >Delete</c-button>
</c-button-group>

Size Variants

Button groups adapt to different button sizes while maintaining proper connection.

Extra Small

Small

Normal

Large

<!-- Extra small -->
<c-button-group>
    <c-button variant="outline" class="btn-xs join-item">XS</c-button>
    <c-button variant="outline" class="btn-xs join-item">Small</c-button>
    <c-button variant="outline" class="btn-xs join-item">Compact</c-button>
</c-button-group>

<!-- Small -->
<c-button-group>
    <c-button variant="primary" class="btn-sm join-item">Small</c-button>
    <c-button variant="primary" class="btn-sm join-item">Button</c-button>
    <c-button variant="primary" class="btn-sm join-item">Group</c-button>
</c-button-group>

<!-- Large -->
<c-button-group>
    <c-button variant="accent" class="btn-lg join-item">Large</c-button>
    <c-button variant="accent" class="btn-lg join-item">Button</c-button>
    <c-button variant="accent" class="btn-lg join-item">Group</c-button>
</c-button-group>

Interactive Examples

Button groups with HTMX integration for dynamic behavior and state management.

Filter Buttons (with HTMX)

Toggle Group

<!-- Filter buttons with HTMX -->
<c-button-group>
    <c-button variant="outline" 
              
              hx-get="/api/filter/all"
              spinner="true">All</c-button>
    <c-button variant="outline" 
              
              hx-get="/api/filter/active"
              spinner="true">Active</c-button>
    <c-button variant="outline" 
              
              hx-get="/api/filter/pending"
              spinner="true">Pending</c-button>
    <c-button variant="outline" 
              
              hx-get="/api/filter/inactive"
              spinner="true">Inactive</c-button>
</c-button-group>

Appendix

Usage Guidelines

Join Item Class

Every button in a group must have the join-item class to properly connect to adjacent buttons.

Consistent Styling

Use the same variant and size classes for all buttons in a group for consistent appearance.

Related Actions

Button groups work best for related actions or options that users might want to access quickly.

Vertical Groups

Add join-vertical class to the button group container to create vertical button layouts.