Skip to component content
Navigation088 / 155

ToolbarItem

Place related action groups within their owning toolbar.

Example
Source
ToolbarItem.tsxtsx
import { Badge, Button, NavigationLink, Text, Toolbar, ToolbarItem, ViewFrame } from "@/ohmygui";

export default function Example() {
  return (
    <ViewFrame width={420} max="100%">
      <Toolbar label="Field guide actions" density="compact">
        <ToolbarItem placement="leading">
          <NavigationLink href="/ohmygui">Back to library</NavigationLink>
        </ToolbarItem>
        <ToolbarItem placement="primary" priority="low">
          <Text weight="semibold">Field guide · Last edited a moment ago</Text>
          <Badge variant="success" tone="soft">Saved</Badge>
        </ToolbarItem>
        <ToolbarItem placement="trailing" priority="high">
          <Button>Share</Button>
        </ToolbarItem>
      </Toolbar>
    </ViewFrame>
  );
}