Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of a toggle.
Available options: accent, alert, brand, info, success
Size
Use class="ui-size-{size}" to set the size of a toggle.
Available options: xs, sm, md (default), lg, xl
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a toggle.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
Max width
Without max-w-*, width comes from component CSS. Default for toggle: none (width: auto).
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