IconButton

Icon-only button. A simplified Button wrapper for actions that only need an icon.

Import

import { IconButton } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage
import { IconButton } from 'vuiii'

<IconButton icon="pencil" @click="edit()" />
<IconButton icon="trash" variant="danger" @click="remove()" />

More Examples

// Different variants
<IconButton icon="plus" variant="primary" />
<IconButton icon="check" variant="secondary" />
<IconButton icon="x-mark" variant="danger" />

// Different sizes
<IconButton icon="cog" size="small" />
<IconButton icon="cog" size="normal" />
<IconButton icon="cog" size="large" />

// With title (tooltip)
<IconButton icon="trash" title="Delete item" @click="remove()" />

Storybook

For interactive examples with all variants, see IconButton in Storybook.