EUIKit

Button Bar

The Button Bar component sets up a small button bar, consisting only of icon buttons, suitable for inline actions in a data table, or an editing toolbar.

The <x-euikit::button-bar /> component wraps around the whole bar, and takes no attributes. Inside, the <x-euikit::button-bar.button /> sets up the actual button.

Button Bar Button component

The button bar button component is similar to the regular <x-e::button /> component, and shares some of the same attributes:

Attribute	Required?	Default	Description
`icon`	Yes	(none)	Icon to place on the button. The icon will be rendered with the `@svg()` Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.
`type`	No	"info"	Type of button. Can take any of the Colors and Types common to other EUIKit components. Defaults to "info" if not specified. A `button-bar.button` will be rendered in grayscale, but will use the `type` coloring on hover. Using a `type="delete"` does not set up a button with a confirmation, unlike the regular Button component.
`title`	No	(none)	Text to render as a tooltip when hovering over the button.
`route`	No	(none)	Route to go to when the button is clicked. If defined, the button will be rendered using the `<a />` tag rather than the `<button />` tag, though it will be visually identical.

Because a button bar button is rendered at a small size, be aware that some icons will not look good scaled down. Heroicons has a "micro" set (heroicon-c-*) set that is designed for small sizes.

Example Button Bar


<x-e::button-bar>
    <x-e::button-bar.button title="New" icon="heroicon-c-document-plus" type="green" />
    <x-e::button-bar.button title="Cut" icon="heroicon-c-scissors" type="blue" />
    <x-e::button-bar.button title="Copy" icon="heroicon-c-pencil-square" type="yellow" />
    <x-e::button-bar.button title="Paste" icon="heroicon-c-clipboard-document" type="info" />
    <x-e::button-bar.button title="Delete" icon="heroicon-c-trash" type="danger" />
</x-e::button-bar>