Header - Admin Components
Note: The
@medusajs/dashboard package doesn't export a header component, so this guide is still the recommended way to build one. Refer to the Components reference for the components that Medusa does export.In this guide, you'll learn how to create a header component that matches the Medusa Admin's design conventions.
Each section in the Medusa Admin has a header with a title, and optionally a subtitle with buttons to perform an action.
To create a component that uses the same header styling and structure, create the file src/admin/components/header.tsx with the following content:
import { Heading, Button, Text } from "@medusajs/ui"
import React from "react"
import { Link, LinkProps } from "react-router-dom"
import { ActionMenu, ActionMenuProps } from "./action-menu"
export type HeadingProps = {
title: string
subtitle?: string
actions?: (
{
type: "button",
props: React.ComponentProps<typeof Button>
link?: LinkProps
} |
{
type: "action-menu"
props: ActionMenuProps
} |
{
type: "custom"
children: React.ReactNode
}
)[]
}
export const Header = ({
title,
subtitle,
actions = [],
}: HeadingProps) => {
return (
<div className="flex items-center justify-between px-6 py-4">
<div>
<Heading level="h2">{title}</Heading>
{subtitle && (
<Text className="text-ui-fg-subtle" size="small">
{subtitle}
</Text>
)}
</div>
{actions.length > 0 && (
<div className="flex items-center justify-center gap-x-2">
{actions.map((action, index) => (
<>
{action.type === "button" && (
<Button
{...action.props}
size={action.props.size || "small"}
key={index}
>
<>
{action.props.children}
{action.link && <Link {...action.link} />}
</>
</Button>
)}
{action.type === "action-menu" && (
<ActionMenu {...action.props} />
)}
{action.type === "custom" && action.children}
</>
))}
</div>
)}
</div>
)
}
The Header component shows a title, and optionally a subtitle and action buttons.
Note: The component also uses the ActionMenu component.
It accepts the following props:
titlestringsubtitlestringOptionalactionsobject[]OptionalAn array of actions to show.
actionsobject[]OptionalExample#
Use the Header component in any widget or UI route.
For example, create the widget src/admin/widgets/product-widget.tsx with the following content:
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { Container } from "../components/container"
import { Header } from "../components/header"
const ProductWidget = () => {
return (
<Container>
<Header
title="Product Widget"
subtitle="This is my custom product widget"
actions={[
{
type: "button",
props: {
children: "Click me",
variant: "secondary",
onClick: () => {
alert("You clicked the button.")
},
},
},
]}
/>
</Container>
)
}
export const config = defineWidgetConfig({
zone: "product.details",
})
export default ProductWidget
This widget also uses a Container custom component.