Atelier UI

Search components…

Search components…

iOS Round Toggle Button

Control Center style round toggle with icon and caption; switches to the tint color when pressed.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

IOSRoundToggleButtonProps

Also accepts all props of Omit<React.ComponentProps<"button">, "onChange" | "children" | "defaultValue">

PropTypeDefaultDescription
icon* requiredReact.ReactNode——
label* requiredstring—Caption under the circle; also used as the accessible name
tintstring"#007aff"Color of the "on" state
pressedboolean——
defaultPressedbooleanfalse—
onPressedChange(pressed: boolean) => void——

Install

$ npx shadcn@latest add https://chromotion.dev/r/ios-round-toggle-button.json

More like this