ActionBar

The Action Bar accommodates all the actions related to a specific task on a screen or pattern.

Usage

<HvActionBar className="gap-xs">
  <HvButton variant="secondaryGhost">Reset</HvButton>
  <div className="flex-1" aria-hidden="true" />
  <HvButton variant="subtle">Cancel</HvButton>
  <HvButton variant="primary">Save</HvButton>
</HvActionBar>

<HvActionBar className="gap-xs">
  <HvButton variant="secondaryGhost">Reset</HvButton>
  <div className="flex-1" aria-hidden="true" />
  <HvButton variant="subtle">Cancel</HvButton>
  <HvButton variant="primary">Save</HvButton>
</HvActionBar>

Note

Check the Card component to see an example of the HvActionBar in use.