Skip to main content

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" />,
	),
);

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>

Props​