HeaderV2
Drawer.HeaderV2 is a structured, opinionated header that consolidates icon/logo, title, description, actions, metadata (children), and tabs into a single component. It replaces the compositional pattern of Drawer.Header > Drawer.Title > Drawer.Description when you want a standardized layout with optional loading state.
Basic
With logo, actions, and metadata
With tabs
Wrap the drawer content in a Tabs.Root to enable tab switching. Drawer.HeaderV2 renders the tab strip at the bottom of the header when tabs is provided.
Loading state
When isLoading is true, actions are hidden and the children (metadata) slot renders a skeleton placeholder.
Properties
HeaderV2
Prop | Required | Default | Type |
|---|---|---|---|
| title | true | string | |
| description | false | undefined | string |
| icon | false | undefined | IconV2NamesType | { logo: LogoV2NamesType } |
| actions | false | undefined | ReactNode |
| tabs | false | undefined | HeaderV2TabItem[] |
| hideClose | false | false | boolean |
| isLoading | false | false | boolean |
| children | false | undefined | ReactNode |
| className | false | undefined | string |