blue
View on GitHub

Icon Button

An icon button is a compact, square button that contains only an icon, used for common actions where an icon alone communicates the intent.

Usage

Pass an Icon component as the button content.

Light
Blue
Zoho Puvi 
<script>
	import { IconButton, Icon } from 'deskblocks';
	import { IconEdit } from 'deskblocks/icons';
</script>

<IconButton>
	<Icon icon={IconEdit} color="--db-color-text-onbrand" />
</IconButton>

Variants

Icon buttons support the same variants as Button.

Light
Blue
Zoho Puvi 
<IconButton variant="primary"><Icon icon={IconEdit} color="--db-color-text-onbrand" /></IconButton>
<IconButton variant="secondary"><Icon icon={IconEdit} /></IconButton>
<IconButton variant="tertiary"><Icon icon={IconEdit} /></IconButton>
<IconButton variant="ghost"><Icon icon={IconEdit} /></IconButton>
<IconButton variant="danger"><Icon icon={IconEdit} color="--db-color-text-ondanger" /></IconButton>
<IconButton variant="danger-secondary"
	><Icon icon={IconEdit} color="--db-color-text-danger" /></IconButton
>

Disabled state

Light
Blue
Zoho Puvi 
<IconButton disabled><Icon icon={IconEdit} /></IconButton>

Slots

Props

variant ‘primary’ | ‘secondary’ | ‘tertiary’ | ‘ghost’ | ‘danger’ | ‘danger-secondary’ ‘primary’ Visual style of the button.
disabled boolean false Disables the button.
href string undefined If set, the button renders as a link.
tabindex number 0 Tab order of the button.
popovertarget string undefined ID of the popover element the button controls.
class string undefined Custom CSS class name for additional styling.

Events