Header bar

Arrange a title, description, and actions.

Conversation

Planning the next release

View code

import { HeaderBar } from "@stack/ui/header-bar";

export default function Example() {
  return (
    <HeaderBar.Root>
      <HeaderBar.Content>
        <HeaderBar.Title>Conversation</HeaderBar.Title>
        <HeaderBar.Description>Planning the next release</HeaderBar.Description>
      </HeaderBar.Content>
    </HeaderBar.Root>
  );
}

Usage

import { HeaderBar } from "@stack/ui/header-bar";

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

HeaderBar.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm"	No	Size variant. Default: "default".

HeaderBar.Content

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

HeaderBar.Title

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>	No	Replace the underlying element using render composition.

HeaderBar.Description

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>	No	Replace the underlying element using render composition.

HeaderBar.Controls

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

HeaderBar.ViewControls

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

HeaderBar.Actions

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

HeaderBar.Menu

Prop	Type	Required	Description
children	ReactNode	Yes	Content rendered inside the component.
label	string	No	Accessible or displayed label for the control. Default: "More actions".
className	string	No	Additional CSS classes for the underlying element.

HeaderBar.Close

Also accepts native element props.

Prop	Type	Required	Description
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
children	ReactNode	No	Content rendered inside the component.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.