Modifiers

Modifier keywords follow the component label on the same line, separated by spaces.

button "Save" primary
button "Delete" disabled
input "Email" error
alert "Session expired" warning

Multiple modifiers can be combined:

button "Archive" primary disabled

Full reference

ModifierAccepted byVisual effect
primarybutton, badgeFilled blue background / blue pill
disabledbutton, input, select, textarea, checkbox, radio, toggle, badgeReduced opacity, non-interactive appearance
activenav items, tabs items, checkbox, radio, toggle, list_item, stepper itemsSelected / checked / on state
errorinput, select, textarea, alert, toast, banner, badgeRed border or red background
warningalert, toast, banner, badgeAmber background
infoalert, toast, bannerBlue background
horizontalstackArranges children in a row with equal width shares
centeredfooter, text, titleFooter: children in a centered column. Text/title: centered text
leftheaderNav items aligned to the left
rightheaderNav items aligned to the right (default)
smallicon, avatar, imageSmaller variant (icon 12px box, avatar 24px, image 48px tall)
largeicon, avatar, imageLarger variant (icon 24px box, avatar 48px, image 120px tall)

Layout direction is contextual, not a modifier. nav renders horizontally inside a header and vertically inside a sidebar; stack is vertical unless marked horizontal. The word vertical is accepted by the parser for backwards compatibility but has no effect.

nav item modifiers

The nav component takes a comma-separated list of items. The active modifier applies to individual items, not to the nav component itself:

nav "Dashboard" active, "Users", "Settings"

Only one item should carry active at a time.

Modifier scope

Modifiers are parsed on the same line as the component declaration. They cannot appear on the following line.

button "Save"
primary          ← NOT valid — primary is on a new line
button "Save" primary   ← valid