GlobalActions

Global Actions are actions that affect the entire page they live in. They should persist while scrolling down the screen.

Source Code

uikit-react-core

GlobalActions uses the global variant by default, rendering an h1 element and applying sticky positioning. Use the section variant to group related content blocks. Use it sparingly—it introduces strong visual separation, which may not always be necessary.

Title

variant

title

position

<HvGlobalActions 
  variant="global"
  title="Title"
  position="sticky"
  backButton={<No Display Name title="Back">
  <HvIconBackwards />
</No Display Name>}
>
  <No Display Name variant="primary">
    Save
  </No Display Name>
  <No Display Name variant="secondarySubtle">
    Reset
  </No Display Name>
  <No Display Name
    dataList={[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2'
      },
      {
        label: 'Action 3'
      }
    ]}
    placement="left"
  />
</HvGlobalActions>

<HvGlobalActions 
  variant="global"
  title="Title"
  position="sticky"
  backButton={<No Display Name title="Back">
  <HvIconBackwards />
</No Display Name>}
>
  <No Display Name variant="primary">
    Save
  </No Display Name>
  <No Display Name variant="secondarySubtle">
    Reset
  </No Display Name>
  <No Display Name
    dataList={[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2'
      },
      {
        label: 'Action 3'
      }
    ]}
    placement="left"
  />
</HvGlobalActions>

Custom content

The content of the Global Actions can be customized. This is useful when you want to add different elements other than the title and actions.

<HvGlobalActions
  backButton={
    <HvIconButton title="Go back">
      <Backwards />
    </HvIconButton>
  }
  title={
    <>
      <Home title="Home" />
      <HvBreadCrumb
        listRoute={[
          { label: "Label 1", path: "#route1" },
          { label: "Label 2", path: "#route2" },
          { label: "Label 3", path: "#route3" },
          { label: "Label 4", path: "#route4" },
          { label: "Label 5", path: "#route5" },
        ]}
        maxVisible={2}
      />
    </>
  }
>
  <HvButton variant="secondaryGhost">Action</HvButton>
  <HvDropDownMenu
    placement="left"
    dataList={[
      { label: "Action 2" },
      { label: "Action 3" },
      { label: "Action 4" },
    ]}
  />
</HvGlobalActions>

<HvGlobalActions
  backButton={
    <HvIconButton title="Go back">
      <Backwards />
    </HvIconButton>
  }
  title={
    <>
      <Home title="Home" />
      <HvBreadCrumb
        listRoute={[
          { label: "Label 1", path: "#route1" },
          { label: "Label 2", path: "#route2" },
          { label: "Label 3", path: "#route3" },
          { label: "Label 4", path: "#route4" },
          { label: "Label 5", path: "#route5" },
        ]}
        maxVisible={2}
      />
    </>
  }
>
  <HvButton variant="secondaryGhost">Action</HvButton>
  <HvDropDownMenu
    placement="left"
    dataList={[
      { label: "Action 2" },
      { label: "Action 3" },
      { label: "Action 4" },
    ]}
  />
</HvGlobalActions>

Form Element Grid