DyonaToolbar

DyonaToolbar is a visual flex layout for commands supplied through children. It does not know Data Sources, business rules, or actions[].

Import

import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import RefreshIcon from '@mui/icons-material/Refresh';
import {Breadcrumbs, Button, IconButton, Link, Tabs, Tooltip, Typography} from '@mui/material';
import {DyonaToolbar} from '@typhonsoftware/dyona-form';

Basic usage

<DyonaToolbar divider title="Customers">
  <Tooltip title="New">
    <IconButton><AddIcon /></IconButton>
  </Tooltip>

  <Tooltip title="Refresh">
    <IconButton><RefreshIcon /></IconButton>
  </Tooltip>
</DyonaToolbar>

Title and menu

title is a subtle optional label on the main toolbar line. menu is an optional visual slot at the far right; it can receive an IconButton, Menu, Popover, or any consumer-provided element. Toolbar does not implement dropdown behavior: the consumer owns anchorEl, open, and onClose.

<DyonaToolbar
  title="Customers"
  menu={<IconButton><MoreVertIcon /></IconButton>}
>
  <Button>Save</Button>
</DyonaToolbar>

Layout

dense reduces padding and spacing. wrap defaults to true; set it to false for one line. justify accepts start, center, end, or space-between. align accepts start, center, or end.

<DyonaToolbar dense justify="space-between" align="center" wrap={false}>
  <Button>Save</Button>
  <Button>Export</Button>
</DyonaToolbar>

divider adds a theme-aware lower separator. sticky keeps the toolbar at the top of its scrolling container with the theme background.

Navigation slot

navigation renders a consumer-provided visual row below the main commands. With divider, the separator sits between both rows. It does not manage routes, tabs, breadcrumbs, previous/next behavior, or navigation state.

<DyonaToolbar
  divider
  navigation={
    <Breadcrumbs>
      <Link>Customers</Link>
      <Typography>Current customer</Typography>
    </Breadcrumbs>
  }
>
  <Button>Refresh</Button>
</DyonaToolbar>

The same slot can receive consumer-controlled tabs:

<DyonaToolbar navigation={<Tabs value={tab} onChange={handleTabChange}>...</Tabs>}>
  <Button>Refresh</Button>
</DyonaToolbar>

Inside a Screen

<DyonaScreen title="Customers">
  <DyonaToolbar divider>
    <Button onClick={handleNewCustomer} variant="contained">New</Button>
  </DyonaToolbar>
  <DyonaGrid {...gridProps} />
</DyonaScreen>

Customer Management is the first live Screen integration: screen-level New customer lives in the toolbar, while record-level Edit customer remains in the Grid.

Inside a Card

<DyonaCard title="Recent invoices">
  <DyonaToolbar dense divider>
    <Button>Refresh</Button>
    <Button>Export</Button>
  </DyonaToolbar>
  <DyonaGrid {...gridProps} />
</DyonaCard>

Responsibilities

DyonaToolbar presents commands. DyonaScreen coordinates logic.

The consuming component supplies buttons and their handlers. Toolbar does not own Data Sources, business actions, permissions, loading state, or application coordination. Use icon buttons with tooltips for frequent actions, text buttons when emphasis or explanation helps, and menu for secondary commands.

V1 props

Prop	Default	Description
children	required	Commands to lay out.
title	—	Subtle optional toolbar label.
menu	—	Consumer-provided visual slot at the far right.
navigation	—	Consumer-provided visual row below commands.
dense	false	Uses compact padding and gap.
sticky	false	Sticks to the top of the scrolling container.
divider	false	Adds a lower theme divider.
wrap	true	Wraps commands onto additional lines.
justify	start	Main-axis alignment.
align	center	Cross-axis alignment.