App Bar

A header element for the top of your page layout. Pairs well with the App Shell.

javascript

import { AppBar } from '@brainandbones/skeleton';

Usage

html

<AppBar>
	<svelte:fragment slot="lead">(lead)</svelte:fragment>
	(center)
	<svelte:fragment slot="trail">(trail)</svelte:fragment>
</AppBar>

Prop	Type	Default	Description
background	string	bg-surface-100 dark:bg-surface-800	Provide classes to set background color.
border	string	-	Provide classes to set border styles.
padding	string	px-4 py-4 md:py-6	Provide classes to set padding.
shadow	string	shadow-lg	Provide classes to define a box shadow.
space	string	space-x-4	Provide classes to set horizontal spacing.

Name	Style Prop	Description
default	slotDefault	Provides content within the center of the bar, e.g. a search element.
lead	slotLead	Provides content on the left end of the bar, e.g. a logo.
trail	slotTrail	Provides content on the right end of the bar, e.g. navigation elements.

Prop	Type	Description
label	string	Provide a semantic ID for the ARIA label.
labelledby	string	Provide the ID of the element that labels the toolbar.