Composer Toolbar

Configuration component

<loquix-composer-toolbar> provides a stable left/right layout for controls placed above or below a chat composer.

loquix-composer-toolbartwo-sidedslot-based

Preview

Composer controls Live component

Atlas ProPrivate

Settings

Usage

import '@loquix/core/define/define-composer-toolbar';

<loquix-composer-toolbar border="bottom">
  <loquix-model-selector
    slot="actions-left"
    value="atlas-pro"
  ></loquix-model-selector>

  <button slot="actions-right" type="button">
    Settings
  </button>
</loquix-composer-toolbar>

Properties

Property	Attribute	Type	Default	Description
border	border	'none' | 'top' | 'bottom'	'none'	Adds a separator on the selected edge.

Slots

Slot	Purpose
actions-left	Model selection, permissions, modes, or other leading controls.
actions-right	Settings, branching, or other trailing controls.

Note

The toolbar has no default slot. Assign every child to actions-left or actions-right.

CSS parts

Part	Purpose
toolbar	Outer layout wrapper.
left	Left-aligned control group.
right	Right-aligned control group.

CSS custom properties

Variable	Purpose
--loquix-composer-toolbar-padding	Toolbar padding.
--loquix-composer-toolbar-gap	Space between the left and right groups.
--loquix-composer-toolbar-item-gap	Gap between items within each group.
--loquix-composer-toolbar-min-height	Minimum toolbar height.
--loquix-composer-toolbar-border-color	Separator color.