ActionsDmduskmoonimplemented6 demos

DmToolbar

DmToolbar groups primary and secondary actions, including overflow menus.

Import@duskmoon-dev/components/dm-toolbar

3API sections

10documented props

4behavior scenarios

Key API

itemsstylemoreTextmaxVisibleSecondaryItemskeytitle

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmToolbar is most often configured through `items`, `style`, `moreText`, `maxVisibleSecondaryItems`.

Covered behavior

Renders secondary actions before primary actions

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmToolbar from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmToolbar } from "@duskmoon-dev/components/dm-toolbar";

export function Example() {
  return (<DmToolbar
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>);
}

Preview

Renders secondary actions before primary actions

test-backed

DmToolbar scenario from the component test coverage: renders secondary actions before primary actions.

Source

import "@duskmoon-dev/components/styles.css";
import { DmToolbar } from "@duskmoon-dev/components/dm-toolbar";

export function DmToolbarRendersSecondaryActionsBeforeDemo() {
  return (<DmToolbar
  // Renders secondary actions before primary actions
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>);
}

Preview

Collapses older secondary actions into More overflow

test-backed

DmToolbar scenario from the component test coverage: collapses older secondary actions into more overflow.

Source

import "@duskmoon-dev/components/styles.css";
import { DmToolbar } from "@duskmoon-dev/components/dm-toolbar";

export function DmToolbarCollapsesOlderSecondaryActionsDemo() {
  return (<DmToolbar
  // Collapses older secondary actions into More overflow
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>);
}

Preview

Supports custom more text and all-secondary overflow

test-backed

DmToolbar scenario from the component test coverage: supports custom more text and all-secondary overflow.

Source

import "@duskmoon-dev/components/styles.css";
import { DmToolbar } from "@duskmoon-dev/components/dm-toolbar";

export function DmToolbarSupportsCustomMoreTextDemo() {
  return (<DmToolbar
  // Supports custom more text and all-secondary overflow
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>);
}

Preview

Renders item dropdown menus with local Dropdown primitive

test-backed

DmToolbar scenario from the component test coverage: renders item dropdown menus with local dropdown primitive.

Source

import "@duskmoon-dev/components/styles.css";
import { DmToolbar } from "@duskmoon-dev/components/dm-toolbar";

export function DmToolbarRendersItemDropdownMenusDemo() {
  return (<DmToolbar
  // Renders item dropdown menus with local Dropdown primitive
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmToolbar
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>
</div>

<div data-theme="moonlight">
  <DmToolbar
  items={[{ key: "main", label: "Main", title: "Main" }]}
  title="DuskMoon"
>
  DuskMoon Dm Toolbar
</DmToolbar>
</div>

API

The API reference below lists every parsed exported type or interface for DmToolbar. Start with `items`, `style`, `moreText`, `maxVisibleSecondaryItems` for common usage.

Types: packages/components/src/components/dm-toolbar/DmToolbar.types.tsScenarios: packages/components/src/components/dm-toolbar/DmToolbar.test.tsx

DmToolbarPropsinterface

Prop	Type	Required	Description
`items`	`DmToolbarItem[]`	No	items configures DmToolbar.
`className`	`string`	No	className configures DmToolbar.
`style`	`CSSProperties`	No	style configures DmToolbar.
`moreText`	`ReactNode`	No	moreText configures DmToolbar.
`maxVisibleSecondaryItems`	`number`	No	maxVisibleSecondaryItems configures DmToolbar.

DmToolbarIteminterface extends Omit< ButtonProps, "children" | "type" | "title" >

Prop	Type	Required	Description
`key`	`string \| number`	No	key configures DmToolbar.
`title`	`ReactNode`	Yes	title configures DmToolbar.
`type`	`DmToolbarItemType`	No	type configures DmToolbar.
`htmlType`	`ButtonProps["type"]`	No	htmlType configures DmToolbar.
`menu`	`DropdownMenu`	No	menu configures DmToolbar.

DmToolbarItemTypetype

"primary" | "default"