IconButton

Square button that holds only an icon; always give it an accessible label. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiIconButton } from '@ziyarago/ui/vue'

Default

Vue

<UiIconButton icon="heart" label="Save" />

<UiIconButton icon="share-2" label="Share" />

<UiIconButton icon="map-pin" label="Location" />

Ghost and small

Vue

<UiIconButton icon="settings" label="Settings" ghost />

<UiIconButton icon="x" label="Close" ghost size="sm" />

Sizes

Vue

<UiIconButton icon="heart" label="Save" size="xs" />

<UiIconButton icon="heart" label="Save" size="sm" />

<UiIconButton icon="heart" label="Save" size="md" />

<UiIconButton icon="heart" label="Save" size="lg" />

<UiIconButton icon="heart" label="Save" size="xl" />

API reference

Square button with only an icon; use for toolbars and compact actions.

Props

PropType and valuesDefaultDescription

iconrequiredstring—Icon name.

labelrequiredstring—Accessible name (aria-label). Required because there is no visible text.

sizexssmmdlgxl'md'Button size: xs 28px, sm 32px, md 40px, lg 48px, xl 56px.

ghostbooleanfalseTransparent background until hover.

Events

Vue: @name. React: onName.

clickNative click event.