Anatomy
- Description: (Optional) Supplementary text that helps users understand the current context or state.
- Actions: One or more actions the user can perform on the affected content.
Usage guidelines
When to use this component
- Use the Action Bar to present users with contextual actions relevant to their current workflow.
Bulk actions in data tables
When users select multiple rows (e.g., patients, records, items), show the Action Bar with actions such as “Unselect,” “Export,” or “Merge.”
Full-page forms
- When users are creating a new entity (e.g., adding a new patient) or editing existing data (e.g., updating patient details), display the Action Bar with actions like “Cancel” or “Save changes”.
- For editing scenarios, show the Action Bar when there are unsaved changes.
When not to use this component
- Do not use Action Bar for brief messages or status updates. Use Toast for temporary, dismissible notifications.
- Do not use the Action Bar inside Modals. Actions within modals should be placed in the modal’s footer.
- Avoid showing the Action Bar for actions unrelated to the user’s current selection or workflow.
Best practices
Do provide a layer of actions at the bottom of the page or inside a component, such as table actions or the view of a long form.
Do not show more than one Action Bar at a time.
Be conscious of mobile regarding content and the amount of actions available. Prioritize or place less important actions in a Dropdown Menu.
Do not stretch the Action Bar or use the mobile version on bigger viewports. Use the default version.
Do not use default or secondary button types in the Action Bar.
General component behaviors
- Buttons are the only controls allowed in an Action Bar.
- Segmented controls do not belong in an Action Bar because the it is primarily for actions that apply to the current view, while a segmented control is for switching the view itself.
- All buttons in an Action Bar should have the same type of content (icon, text label, or text label with icon).
- The Action Bar appears in response to user actions. It becomes visible when there are relevant actions available.
- The Action Bar hides when the relevant actions are no longer available, such as when selections are cleared or changes are reverted.
Placement
- The Action Bar should be placed at the bottom of the page or content area it affects, centered horizontally.
- There is a --w-space-s between the Action Bar and the bottom edge.
- The Action Bar is most commonly fixed to the bottom of the page, but can be sticky within the content area.
Responsive behavior
- When used in forms, the Action Bar is always visible, whether the user is editing or creating new content.
- When the viewport shrinks, the header will wrap to two lines until it hits the mobile breakpoint.
- When the viewport hits the medium breakpoint the Action Bar remains sticky at bottom while the buttons take on their responsive mobile size and wrap under the header.
- When the viewport hits a small breakpoint the header is removed and the buttons become full-width within the Action Bar.
Known Gaps
- Accessibility guidelines