A button that stays in - icon plus label, in two variants and three sizes, where Pressed is not a finger held down but the state the control is left in.
The on state, not a finger held down. The source calls it data-state=on: the toggle that is currently doing its thing and will stay that way after you let go. That is the entire point of the component - a button that keeps its position - and everything else on the State axis is the ordinary run of any button.
How do I tell an on toggle from a hovered one?
By the label. Both take a base.muted fill, so the box cannot separate them - what changes is the type. On the Default variant hover writes base.muted-foreground while on keeps base.foreground, which is the source's hover:text-muted-foreground against data-[state=on]:text-accent-foreground. Outline overrides that back to the dark label, so on Outline a hovered toggle and an on one really are the same picture; that is the source's own behaviour, and it is a reason to prefer Default inside a toolbar where several sit together.
When do I use Default and when Outline?
Default has no fill and no border at rest, so it only works inside something that already reads as a control strip - a toolbar, a Toggle Group. Outline gives it base.background and a 1px base.input edge, which is what a toggle standing on its own needs. A lone Default toggle on a white page is invisible until someone points at it.
What separates the three sizes?
The box and its padding, and nothing else. 68 × 28 at sm, 68 × 32 at Default, 72 × 36 at lg, all carrying the same 14/20 label and the same 16px icon. Keeping the type fixed is what lets three different sizes line up in one row without the labels stepping.
Can I drop the label?
Yes, and the source expects it - min-w-9 exists so the box can be square. At Default size that gives you 32 by 32 with the icon centred. It comes with one requirement: an aria-label, and a tooltip whenever the glyph is at all ambiguous, because a pressed icon with no name is a state nobody can read.
Toggle, switch or checkbox?
Decide by when the change lands. A toggle acts immediately and sits next to the thing it changes - bold on this word, this filter on this list. A switch also acts immediately but reads as a preference, and it wants a label of its own. A checkbox is a value in a form and changes nothing until something is submitted. Picking the one that looks best is how you end up with a settings page that silently saves and a form that silently does not.
How do I build a group of them?
With Toggle Group, which is its own component - a bordered container with a 2px inset holding borderless toggles. Butting three Outline toggles together instead gives you doubled borders at every join and a strip a pixel taller than its parts. The group also carries the rule: independent marks like bold and italic, or exclusive ones like the three alignments.
What is the icon in the component?
Tabler's bold glyph at 16 × 16, stroke 2, bound to base.foreground - the same weight every other 16px icon in the kit carries. It is a placeholder - swap it on the instance. The label beside it is a plain Text layer, so a toggle that needs no label is a matter of hiding it and letting the box go square.
Does it work right to left?
The toggle needs nothing: icon before label is reading order, the padding is even and the box is symmetrical, so dir on an ancestor does all of it. The icons are the part that needs thought. An alignment glyph describes a direction and has to mirror with the text; bold, italic and underline describe a shape and must not, or you get a backwards B. If a glyph flips, its aria-label should flip with it - write start and end rather than left and right.
Is there a usage frame?
No - this page in the file is the Components board and nothing else. The examples on this page are the kit's answer to that: a formatting toolbar, a single filter, the icon-only case, the argument against the two controls it gets confused with, and what changes once several sit together.