Button

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gridGap: '0.1rem', }} data-testid="pw-button-solid" > {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'].map( (variant) => ( <Button key={variant} variant={variant} className="me-2 mb-2"> {variant} </Button> ), )} </div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
        gridGap: '0.1rem',
    }}
    data-testid="pw-button-solid"
>
    {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'].map(
        (variant) => (
            <Button key={variant} variant={variant} className="me-2 mb-2">
                {variant}
            </Button>
        ),
    )}
</div>

Outline variants

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gridGap: '0.1rem', }} data-testid="pw-button-outline" > {[ 'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', ].map((variant) => ( <Button key={variant} variant={variant} className="me-2 mb-2"> {variant} </Button> ))} </div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
        gridGap: '0.1rem',
    }}
    data-testid="pw-button-outline"
>
    {[
        'outline-primary',
        'outline-secondary',
        'outline-success',
        'outline-danger',
        'outline-warning',
        'outline-info',
        'outline-light',
        'outline-dark',
    ].map((variant) => (
        <Button key={variant} variant={variant} className="me-2 mb-2">
            {variant}
        </Button>
    ))}
</div>

Size variants

All buttons are md by default. Use the size prop to change the size of the button.

Result

Loading...

Live Editor

<div data-testid="pw-button-sizes"> {['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((variant) => ( <Button key={variant} size={variant} className="me-2 mb-2"> {variant} Size </Button> ))} </div>

<div data-testid="pw-button-sizes">
    {['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((variant) => (
        <Button key={variant} size={variant} className="me-2 mb-2">
            {variant} Size
        </Button>
    ))}
</div>

Block buttons

Create responsive stacks of full-width, “block buttons” with a mix of display and gap utilities.

Result

Loading...

Live Editor

<div className="d-grid gap-2"> <Button variant="primary" size="lg"> Block level button </Button> <Button variant="secondary" size="lg"> Block level button </Button> </div>

<div className="d-grid gap-2">
    <Button variant="primary" size="lg">
        Block level button
    </Button>
    <Button variant="secondary" size="lg">
        Block level button
    </Button>
</div>

Icons

Use renderPrefix and renderSuffix to add icons to buttons.

Result

Loading...

Live Editor

<div data-testid="pw-button-icons"> {['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((variant) => ( <Button key={variant} size={variant} className="me-2 mb-2" renderPrefix={() => <span className="icon-arrow-left" />} renderSuffix={() => <span className="icon-arrow-right" />} > {variant} Size </Button> ))} </div>

<div data-testid="pw-button-icons">
    {['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((variant) => (
        <Button
            key={variant}
            size={variant}
            className="me-2 mb-2"
            renderPrefix={() => <span className="icon-arrow-left" />}
            renderSuffix={() => <span className="icon-arrow-right" />}
        >
            {variant} Size
        </Button>
    ))}
</div>

Loading

Result

Loading...

Live Editor

function LoadingButton({ variant, ...restProps }) { const [count, setCount] = useState(1); const [isLoading, setLoading] = useState(false); useEffect(() => { if (isLoading) { setTimeout(() => { setLoading(false); }, 2000); } }, [isLoading]); const handleClick = () => { setLoading(true); setCount(count * 10); }; return ( <Button variant={variant} loading={isLoading} disabled={isLoading} onClick={!isLoading ? handleClick : null} {...restProps} > {isLoading ? 'Loading…' : `Click to load ${count}`} </Button> ); } render( ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'].map( (variant) => <LoadingButton key={variant} variant={variant} className="me-2 mb-2" />, ), );

function LoadingButton({ variant, ...restProps }) {
    const [count, setCount] = useState(1);
    const [isLoading, setLoading] = useState(false);

    useEffect(() => {
        if (isLoading) {
            setTimeout(() => {
                setLoading(false);
            }, 2000);
        }
    }, [isLoading]);

    const handleClick = () => {
        setLoading(true);
        setCount(count * 10);
    };

    return (
        <Button
            variant={variant}
            loading={isLoading}
            disabled={isLoading}
            onClick={!isLoading ? handleClick : null}
            {...restProps}
        >
            {isLoading ? 'Loading…' : `Click to load ${count}`}
        </Button>
    );
}

render(
    ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link'].map(
        (variant) => <LoadingButton key={variant} variant={variant} className="me-2 mb-2" />,
    ),
);

Props