Toggle

A two-state button that can be either on or off.

Installation

$npx maddex add Toggle

Default

Start with the baseline shadcn-style pattern: one uncontrolled toggle, one icon, and an optional default pressed state.

Preview

        
            
        
    

Controlled

Use pressed and on-pressed-change when nearby UI needs to react to the toggle state.

Preview

        
            
        
    

Outline With Text

Follow the shadcn outline and size examples when the toggle needs a clearer label or should sit inside a toolbar-like row.

Preview