The Toggle component is a customizable button that maintains a pressed state. It allows users to toggle between two states and provides optional controlled and uncontrolled behavior.
import { Toggle } from "mogora-ui";
import { EllipsisVertical } from "lucide-react";
export default function ToggleDemo() {
return (
<Toggle className="size-10">
<EllipsisVertical size={30} />
</Toggle>
)
}
A button component that toggles between pressed and unpressed states.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Content to be displayed inside the toggle button. |
| pressed | boolean | Controlled state of the toggle button. |
| defaultPressed | boolean | Initial state of the toggle button in uncontrolled mode. |
| onPressedChange | (open: boolean) => void | Callback function triggered when the pressed state changes. |
| className | string | Additional CSS classes for styling the button. |