An app bar displays information and actions relating to the current screen, such as the title, primary navigation, and top-level actions. It typically sits along the top of the layout.
Figma
The Figma reference for AppBar will appear here once the design link is added.
Storybook
Interactive examples for AppBar will render here once the Storybook link is wired in.
Best practices
- Keep it to a small set of the most important, high-level actions.
- Maintain a consistent position and content pattern across screens.
- Give icon-only actions accessible labels.
- Consider how the bar adapts on small screens — collapse actions into a menu when space is tight.
Do’s and don’ts
Do
Surface a few top-level actions and the current context.
Don’t
Crowd the app bar with every possible action on the screen.