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>
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>
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>
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>
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>
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" />, ), );
Inline Links
Sometimes using a button as a link is required. Use the variant="inline-link"
prop to style the button as an inline link.
Result
Loading...
Live Editor
<p> Go to{' '} <Button variant="inline-link" renderPrefix={() => <span className="icon-link-external-01" />}> eMoney Advisor </Button>{' '} for more information or sit back and read more{' '} <Button variant="inline-link">Documentation</Button>. </p>