Turbine UI - Laravel and Tailwind CSS Button Group Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Button Group

Group buttons together

x-t-button-group

Preview and Examples

<x-turbine-ui-button-group border divide>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="brand">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="brand">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="brand">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="brand">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="brand">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="primary">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="primary">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="primary">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="primary">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="primary">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="secondary">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="secondary">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="secondary">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="secondary">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="secondary">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="success">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="success">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="success">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="success">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="success">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="warning">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="warning">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="warning">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="warning">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="warning">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>
 
<x-turbine-ui-button-group border divide variant="danger">
    <x-turbine-ui-button prefix="<i class='fa-solid fa-pencil'></i>" border="false" variant="danger">Edit</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-copy'></i>" border="false" variant="danger">Copy</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-solid fa-eye'></i>" border="false" variant="danger">Preview</x-turbine-ui-button>
    <x-turbine-ui-button prefix="<i class='fa-solid fa-trash'></i>" border="false" variant="danger">Delete</x-turbine-ui-button>
</x-turbine-ui-button-group>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
divide	boolean	true false	Adds a divide between elements
hollow	boolean	true false	Removes background colour
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette