Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a button.
Available options: accent, alert, brand, info, success
Variant
Variant modifiers control button surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add
ui-solid
for a filled surface.
Semantic × variant
Combine semantic palette and variant treatment on the same host, for example button ui-accent ui-solid.
Size
Use class="ui-size-{size}" to set the size of a button.
Available options: xs, sm, md (default), lg, xl
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a button.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
Width
Without w-*, width comes from component CSS. Default for button: none (width: fit-content).
Use class="w-{step}" to set the host stretch mode of a button (`w-full`, `w-fit`); use Max width for named container steps.
Available options: default (fit-content), full, fit
Max width
Without max-w-*, width comes from component CSS. Default for button: none (width: fit-content).
Use class="max-w-{step}" to show a capped full-width control on fit-content hosts (pair w-full with max-w-* and wide content when labels are short).
Available options: none (default), full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl