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> ))} </>

<>
    {['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> ))} </>

<>
    {['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>
    ))}
</>