LayerHeader

'use client';

import { LayerHeader } from '@/ui/LayerHeader';

export function LayerHeaderDemo() {
  return (
    <div className="border-lightGrey w-full border">
      <LayerHeader
        hLevel={2}
        leftButton={{ label: 'Back', icon: 'ArrowDefaultLeft', onClick: () => {} }}
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: () => {} }}
      >
        Search filters
      </LayerHeader>
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/layer-header.json
Copy

Usage

<Layer /> renders its own LayerHeader. Use it directly to build a layer-like panel, like a sidebar or a bottom sheet.

Copyimport { LayerHeader } from '@/ui/LayerHeader';
 
export function Component() {
  return (
    <LayerHeader
      hLevel={2}
      leftButton={{ label: 'Back', icon: 'ArrowDefaultLeft', onClick: goBack }}
      rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
    >
      Search filters
    </LayerHeader>
  );
}

API Reference

LayerHeader

Extra props are spread on the <header> element.

LayerHeaderButtonProps

Any <button> attribute and Button prop is forwarded, except variant and theme.

Notes

• Centered heading: the buttons are absolutely positioned and the heading keeps a 56px inline padding, so it stays centered whether there are zero, one or two buttons, and long headings wrap instead of running under them.
• RTL: the buttons use logical positions (start / end), so they swap sides in right-to-left layouts.
• Accessible description: give the header an id to have a screen reader announce the heading after a button name, like "Close, Search filters".