Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Button Group

Group buttons together

Tag: x-turbine-ui-button-group 
<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 Adds an accent
border boolean Adds a border
divide boolean Adds a divide between elements
hollow boolean Removes background colour
ring boolean Adds a ring
rounded boolean Adds a rounded corner
shadow boolean Adds a shadow
variant string A variant is like a colour palette
Theme