ToggleButton

ToggleButton component is used to create a button that can be toggled on or off.

Migrating to PrimeReact v11: What Changed and Why

A hands-on guide to the new compound component API, headless hooks, and Tailwind-first theming in PrimeReact v11.

May 12

preview

Installation#

npx shadcn@latest add @primereact/ui/togglebutton

Usage#

import { ToggleButton } from '@/components/ui/togglebutton';

<ToggleButton>Toggle</ToggleButton>

Examples#

Basic#

basic-demo

'use client';
import { Heart, HeartFill } from '@primeicons/react';
import type { ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
import { ToggleButton } from '@/components/ui/togglebutton';

export default function BasicDemo() {
    return (
        <div className="flex items-center justify-center">
            <ToggleButton>
                {({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? <HeartFill></HeartFill> : <Heart></Heart>)}
            </ToggleButton>
        </div>
    );
}

Render Props#

This is called the render prop pattern. It allows using a function to customize what the component displays based on its internal state.

render-props-demo

'use client';
import { Lock } from '@primeicons/react';
import type { ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
import { ToggleButton } from '@/components/ui/togglebutton';

export default function RenderPropsDemo() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4">
            <ToggleButton>{({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? 'On' : 'Off')}</ToggleButton>
            <ToggleButton>
                {({ togglebutton }: ToggleButtonIndicatorInstance) =>
                    togglebutton?.state.pressed ? (
                        <>
                            <Lock></Lock>Locked
                        </>
                    ) : (
                        <>
                            <i className="pi pi-lock-open" />
                            Unlocked
                        </>
                    )
                }
            </ToggleButton>
            <ToggleButton>
                {({ togglebutton }: ToggleButtonIndicatorInstance) =>
                    togglebutton?.state.pressed ? (
                        <>
                            <i className="pi pi-volume-up" />
                            Mute
                        </>
                    ) : (
                        <>
                            <i className="pi pi-volume-off" />
                            Unmute
                        </>
                    )
                }
            </ToggleButton>
        </div>
    );
}

Controlled#

Use pressed and onPressedChange properties to control the state of the ToggleButton.

controlled-demo

'use client';
import type { ToggleButtonRootChangeEvent } from 'primereact/togglebutton';
import { ToggleButton } from '@/components/ui/togglebutton';
import * as React from 'react';

export default function ControlledDemo() {
    const [pressedState, setPressedState] = React.useState(false);

    return (
        <div className="flex items-center justify-center">
            <ToggleButton pressed={pressedState} onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}>
                {pressedState ? 'Pressed' : 'Not Pressed'}
            </ToggleButton>
        </div>
    );
}

Size#

ToggleButton provides small and large sizes as alternatives to the base by using the size property.

sizes-demo

import { ToggleButton } from '@/components/ui/togglebutton';

export default function SizesDemo() {
    return (
        <div className="flex flex-col gap-2 items-center justify-center">
            <ToggleButton size="small" className="min-w-16">
                Small
            </ToggleButton>
            <ToggleButton size="normal" className="min-w-20">
                Normal
            </ToggleButton>
            <ToggleButton size="large" className="min-w-28">
                Large
            </ToggleButton>
        </div>
    );
}

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. This style is useful when integrating with form validation libraries.

invalid-demo

'use client';
import type { ToggleButtonRootChangeEvent } from 'primereact/togglebutton';
import { ToggleButton } from '@/components/ui/togglebutton';
import * as React from 'react';

export default function InvalidDemo() {
    const [pressedState, setPressedState] = React.useState(false);

    return (
        <div className="flex items-center justify-center">
            <ToggleButton
                pressed={pressedState}
                onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}
                invalid={!pressedState}
            >
                Invalid
            </ToggleButton>
        </div>
    );
}

Disabled#

When disabled is present, the element cannot be edited and focused.

disabled-demo

import { ToggleButton } from '@/components/ui/togglebutton';

export default function DisabledDemo() {
    return (
        <div className="flex items-center justify-center">
            <ToggleButton disabled>Disabled</ToggleButton>
        </div>
    );
}