Toolbar
Toolbar
Default Toolbar
Standard toolbar with 34x34 icon buttons.
<.toolbar>
<.tool_button variant="flat" size="md" label="New">
<Icons.icon_notepad class="w-[32px] h-[32px]" />
</.tool_button>
<.tool_separator size="md" />
<.tool_button variant="flat" size="md" label="Cut">
<Icons.icon_btn_edit class="w-[16px] h-[16px]" />
</.tool_button>
</.toolbar>
Compact Toolbar
Smaller 24x24 buttons for formatting toolbars.
<.toolbar variant="compact">
<.tool_button variant="flat" size="sm" label="Bold">
<Icons.icon_fmt_bold class="w-[14px] h-[14px]" />
</.tool_button>
<.tool_separator size="sm" />
</.toolbar>
Active & Disabled States
Buttons can be active (pressed) or disabled.
<.tool_button variant="flat" size="md" label="Connect">
<Icons.icon_btn_connect_lightning class="w-[16px] h-[16px]" />
</.tool_button>
<.tool_button variant="flat" size="md" label="Disconnect" active>
<Icons.icon_btn_disconnect class="w-[16px] h-[16px]" />
</.tool_button>
<.tool_button variant="flat" size="md" label="Disabled" disabled>
<Icons.icon_btn_connect_disabled class="w-[16px] h-[16px]" />
</.tool_button>
Platform Main Toolbar
Replicating the platform's main toolbar with icon groups.
Language
14 objects
