Header

<ahi-header> | AhiHeader

The header is a block of designated space for labelling the currently viewed context as well as providing primary actions.

Dashboard

Export

Create new

<ahi-header>
  <h1 class="ahi-text-heading ahi-text-semibold">Dashboard</h1>
  <div class="ahi-row ahi-gap-2" slot="end">
    <ahi-button>Export</ahi-button>
    <ahi-button variant="primary">
        <ahi-icon slot="prefix" name="plus" size="minor"></ahi-icon>
        Create new
    </ahi-button>
  </div>
</ahi-header>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/header/header.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/header/header.js';

Slots

Name	Description
(default)	The header content
`end`	Optional slot for buttons, toggles, etc.

Learn more about using slots.

Properties

Name	Description	Type	Default
`size`	Controls the size of the header component.	`'m' \| 's'`	`'m'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.