Axonyx UI

Layout primitive

Divider

Separate content sections or groups of toolbar actions with a line that follows the active Foundry palette.

Next: Spacer

Content sections

The default line uses the border token. Strong increases contrast; signal uses the palette accent.

Project details

Publishing settings

Release checklist

Ready to deploy

View code
Code
asx
<Copy>Project details</Copy>
<Divider />
<Copy>Publishing settings</Copy>
<Divider tone="strong" />
<Copy>Release checklist</Copy>
<Divider tone="signal" />
<Copy>Ready to deploy</Copy>

Toolbar groups

Use vertical orientation in a Flex row to separate related actions. Keep short toolbars compact enough to fit on a phone.

View code
Code
asx
<Flex gap="sm" align="center">
  <Button variant="ghost">Undo</Button>
  <Button variant="ghost">Redo</Button>
  <Divider orientation="vertical" tone="strong" />
  <Button variant="secondary">Save</Button>
</Flex>

Installation

Command
bash
cargo ax add ui
Manual setup
Cargo.toml
toml
[dependencies]
axonyx-ui = "0.0.80"
app/layout.asx
asx
use "@axonyx/ui"

Divider contract

Import
asx
import { Divider } from "@axonyx/ui/foundry/Divider.asx"

orientation: optional String. The default is a horizontal line; vertical renders a vertical line with a minimum height of 1.5rem.

tone: optional String. The default uses the regular border; strong uses the stronger border; signal uses the current palette accent.

Divider renders an hr element and accepts no content slot. It has its own margins; combine it with Stack deliberately to avoid double spacing.