ActionBar

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

Usage

<HvActionBar style={{ gap: theme.space.xs }}>
  <HvButton variant="secondaryGhost">Cancel</HvButton>
  <div style={{ flex: 1 }} aria-hidden="true">
    &nbsp;
  </div>
  <HvButton variant="secondaryGhost">Save</HvButton>
  <HvDropDownMenu
    dataList={[
      { id: "export", label: "Export", icon: <Open />, disabled: true },
      {
        id: "preview",
        label: <HvTypography variant="label">Preview</HvTypography>,
        icon: <Preview />,
      },
    ]}
  />
</HvActionBar>

<HvActionBar style={{ gap: theme.space.xs }}>
  <HvButton variant="secondaryGhost">Cancel</HvButton>
  <div style={{ flex: 1 }} aria-hidden="true">
    &nbsp;
  </div>
  <HvButton variant="secondaryGhost">Save</HvButton>
  <HvDropDownMenu
    dataList={[
      { id: "export", label: "Export", icon: <Open />, disabled: true },
      {
        id: "preview",
        label: <HvTypography variant="label">Preview</HvTypography>,
        icon: <Preview />,
      },
    ]}
  />
</HvActionBar>

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

Accordion Avatar