Components
App Bar
The bar at the top of an app, with Toolbar for its content.
AppBar holds an app's title, navigation and actions. Toolbar lines up the content inside it. Both are Server Components.
import AppBar from '@hone-ui/react/AppBar';
import Toolbar from '@hone-ui/react/Toolbar';Examples
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Inbox
</Typography>
<Button color="inherit">Log in</Button>
</Toolbar>
</AppBar><AppBar position="static" color="default">
<Toolbar variant="dense">
<Typography variant="h6">Dense</Typography>
</Toolbar>
</AppBar>AppBar props
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning', any palette key | 'primary' | The background. |
position | 'fixed', 'absolute', 'sticky', 'static', 'relative' | 'fixed' | The CSS position. |
enableColorOnDark | boolean | false | Keeps the palette color in dark mode. |
elevation | number from 0 to 24 | 4 | The shadow depth. |
square | boolean | true | Square corners. |
component | ElementType | 'header' | The element to render. |
sx, className, style, ref, children | Standard. |
Toolbar props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'regular', 'dense' | 'regular' | Regular is 56px, 64px from 600px up. Dense is 48px. |
disableGutters | boolean | false | Removes the side padding. |
component | ElementType | 'div' | The element to render. |
sx, className, style, ref, children | Standard. |
Notes
- Neither reads theme
defaultProps, because both stay Server Components. - Toolbar's heights use the default 600px breakpoint.
- The Minimal look draws a flat bar with a bottom border.
Accessibility
AppBar renders a header, a banner landmark at the top level of a page.