App header API

Import

import { AppHeader, SimpleAuthTool } from '@cimpress-ui/react';

Accessibility notes

AppHeader is designed to be a banner landmark. Make sure that app header is a direct descendant of your application’s <body> element.

Header tools

AppHeader can render custom components (“tools”) provided in the tools prop. Tools allow the app header to be extensible, which in turn gives more freedom to various domains and teams that may have different needs.

Preview
Code

import { AppHeader, IconButton } from '@cimpress-ui/react';
import { IconBookOpen, IconSettingsCog } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <AppHeader
      title="My app"
      titleLink={{ href: '#', target: '_self' }}
      tools={
        <>
          <IconButton variant="tertiary" size="small" icon={<IconBookOpen />} aria-label="Help" />
          <IconButton variant="tertiary" size="small" icon={<IconSettingsCog />} aria-label="Settings" />
        </>
      }
    />
  );
}

API reference

AppHeader

Displays a basic application header.

See app header usage guidelines.

ref Ref<HTMLDivElement>: The ref type for this component.

AppHeaderProps

title * string: The title displayed in the header, usually the application name. Rendered as an <h1> element.
titleLink * string | AppHeaderTitleLinkProps: The props of the link that is rendered around the header title.
tools ReactNode: The tools to render at the end of the header.
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

SimpleAuthTool

A header tool for simple authentication.

SimpleAuthToolProps

onLoginRequested * () => void: A function called when the user requests to log in.
onLogoutRequested * () => void: A function called when the user requests to log out.
profile SimpleAuthProfile: The profile data of the currently logged in user.
accountName string: The name of the account associated with the user.