Utility bars

Documentation
Pricing
Login

<x-app-ui::utility-bar background-color="light">
    <x-slot name="start">
        <x-app-ui::utility-bar.heading>
            Razor UI
        </x-app-ui::utility-bar.heading>
    </x-slot>

    <x-slot name="end">
        <x-app-ui::utility-bar.actions>
            <x-app-ui::icon-button label="Archive" icon="iconic-archive" />

            <x-app-ui::icon-button label="Move" icon="iconic-folder" />

            <x-app-ui::icon-button label="Edit" icon="iconic-edit" />
        </x-app-ui::utility-bar.actions>
    </x-slot>
</x-app-ui::utility-bar>

API

`app-ui::utility-bar`

Attributes

Name	Default	Options	Notes
`background-color`		`light`

Slots

Name	Notes
`end`	Contains the right-aligned content of the utility bar.
`start`	Contains the left-aligned content of the utility bar.

`app-ui::utility-bar.actions`

Slots

Name	Notes
Main	Contains `app-ui::icon-button` components.

`app-ui::utility-bar.heading`

Slots

Name	Notes
Main	Contains the text content for the heading.