Skip to main content

IconButton

IconButtons can be used to render correctly spaced icons within Buttons.

With an Icon​

Result
Loading...
Live Editor
<>
	{['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => (
		<div className="d-flex gap-3 mb-3">
			<Button size={size}>Button</Button>
			{[
				undefined,
				'secondary',
				'success',
				'danger',
				'warning',
				'info',
				'light',
				'dark',
				'link',
			].map((variant) => (
				<div key={variant}>
					<IconButton size={size} variant={variant}>
						<KyberIcons.IconHeartHand />
					</IconButton>
				</div>
			))}
		</div>
	))}
	{['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => (
		<div className="d-flex gap-3 mb-3">
			<Button size={size} variant="outline-primary">
				Button
			</Button>
			{[
				'outline-primary',
				'outline-secondary',
				'outline-success',
				'outline-danger',
				'outline-warning',
				'outline-info',
				'outline-light',
			].map((variant) => (
				<div key={variant}>
					<IconButton size={size} variant={variant}>
						<KyberIcons.IconHeartHand />
					</IconButton>
				</div>
			))}
		</div>
	))}
</>

With an icon className (econ)​

Result
Loading...
Live Editor
<>
	{['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => (
		<div className="d-flex gap-3 mb-3">
			<Button size={size}>Button</Button>
			{[
				undefined,
				'secondary',
				'success',
				'danger',
				'warning',
				'info',
				'light',
				'dark',
				'link',
			].map((variant) => (
				<div key={variant}>
					<IconButton size={size} variant={variant} iconClassName="icon-heart-hand" />
				</div>
			))}
		</div>
	))}
	{['xxl', 'xl', 'lg', 'md', 'sm', 'xs'].map((size) => (
		<div className="d-flex gap-3 mb-3">
			<Button size={size} variant="outline-primary">
				Button
			</Button>
			{[
				'outline-primary',
				'outline-secondary',
				'outline-success',
				'outline-danger',
				'outline-warning',
				'outline-info',
				'outline-light',
			].map((variant) => (
				<div key={variant}>
					<IconButton size={size} variant={variant} iconClassName="icon-heart-hand" />
				</div>
			))}
		</div>
	))}
</>