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 is of variant global by default, meaning that an h1 element will be rendered and it will be sticky by default.
The section variant of Global Actions should be used to group related blocks of information. Use with parsimony, you might not need such a clear separator.

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