The Toggle component extends Base UI's Toggle. It's a two-state button that can be on (pressed) or off. Perfect for favorite buttons, formatting options, or any binary state.
Here is the component implementation code that you can copy to your project:
// https://devie-ui.com/components/toggle
// https://base-ui.com/react/components/toggle
import { Toggle as BaseToggle } from "@base-ui/react/toggle";
import clsx from "clsx";
import styles from "./Toggle.module.scss";
type Variant = "secondary" | "naked";
function Toggle({ className, variant = "secondary", ...props }: Toggle.Props) {
return (
<BaseToggle
className={clsx(
styles.toggle,
variant === "secondary" && styles.variantSecondary,
variant === "naked" && styles.variantNaked,
className,
)}
{...props}
/>
);
}
namespace Toggle {
export interface Props extends BaseToggle.Props {
variant?: Variant;
}
export type State = BaseToggle.State;
export type ChangeEventDetails = BaseToggle.ChangeEventDetails;
}
export default Toggle;A basic toggle button that switches between pressed and unpressed states. The data-pressed attribute is applied when active.
Use pressed and onPressedChange props for controlled state management.
Toggle buttons can include text labels alongside icons.
Use the disabled prop to prevent interaction.