ModalHeader

Header bar for modal / dialog content: a title with an optional description, an optional back button, optional custom actions, and an optional close button.

When to use

Use ModalHeader at the top of the content you place inside a Modal / openModal (@uxf/ui/modal) or a DialogPanel (@uxf/ui/dialog) to get the standard modal title row. The back and close buttons render only when you pass onGoBack / onClose.

It is a presentational subcomponent — it does not open, close, or manage a modal itself; wire those actions through its callbacks. For a full title/body/footer dialog layout, see ModalDialog.

Usage

import { ModalHeader } from "@uxf/ui/modal-header";

<ModalHeader description="View and manage your time off" onClose={handleClose} title="Time off details" />;

With a back button and custom actions:

import { Button } from "@uxf/ui/button";
import { Icon } from "@uxf/ui/icon";
import { ModalHeader } from "@uxf/ui/modal-header";

<ModalHeader
    actionsComponent={
        <Button isIconButton onClick={handleAction} size="sm" variant="text">
            <Icon name="ellipsis-vertical" />
        </Button>
    }
    description="View and manage your time off"
    onClose={handleClose}
    onGoBack={handleGoBack}
    title="Time off details"
/>;

Props

Prop	Type	Default	Description
`title`	`ReactNode`	— (required)	Header title.
`description`	`ReactNode`	—	Secondary line rendered under the title.
`onGoBack`	`() => void`	—	When set, renders a leading back (`angle-left`) icon button.
`onClose`	`() => void`	—	When set, renders a trailing close (`xmark`) icon button.
`actionsComponent`	`ReactNode`	—	Custom content rendered before the close button.
`className`	`string`	—	Extra class on the root `<header>`.

Requirements

Import the component stylesheet once in your global CSS. ModalHeader renders Button and Icon internally, so their stylesheets are required too:

@import url("@uxf/ui/css/modal-header.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Links

Figma

Default

Open in new tab

When to use

It is a presentational subcomponent — it does not open, close, or manage a modal itself; wire those actions through its callbacks. For a full title/body/footer dialog layout, see ModalDialog.

Usage

import { ModalHeader } from "@uxf/ui/modal-header"; <ModalHeader description="View and manage your time off" onClose={handleClose} title="Time off details" />;

With a back button and custom actions:

import { Button } from "@uxf/ui/button"; import { Icon } from "@uxf/ui/icon"; import { ModalHeader } from "@uxf/ui/modal-header"; <ModalHeader actionsComponent={ <Button isIconButton onClick={handleAction} size="sm" variant="text"> <Icon name="ellipsis-vertical" /> </Button> } description="View and manage your time off" onClose={handleClose} onGoBack={handleGoBack} title="Time off details" />;

Props

Prop

Type

Default

Description

title

ReactNode

— (required)

Header title.

description

ReactNode

—

Secondary line rendered under the title.

onGoBack

() => void

—

When set, renders a leading back (angle-left) icon button.

onClose

() => void

—

When set, renders a trailing close (xmark) icon button.

actionsComponent

ReactNode

—

Custom content rendered before the close button.

className

string

—

Extra class on the root <header>.

Requirements

Import the component stylesheet once in your global CSS. ModalHeader renders Button and Icon internally, so their stylesheets are required too:

@import url("@uxf/ui/css/modal-header.css"); @import url("@uxf/ui/css/button.css"); @import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.