Icon Button

Display an icon button.

Usage

Styled button component variants for single icons.

<template>
  <CIconButton icon="i-heroicons-home" />
</template>

Variant

<template>
<CIconButton variant="flat" icon="i-heroicons-home" />
</template>

Size

If using the #default slot with CIcon, the icon will not inherit the child icon size styles. The size will need to be defined again on the CIcon component using size.

<template>
<CIconButton size="xl" icon="i-heroicons-home" />
</template>

Disabled

<template>
<CIconButton disabled icon="i-heroicons-home" />
</template>

Props

type
"reset" | "submit" | "button"
"button"
size
"md" | "sm" | "lg" | "xl" | "xs" | "2xl"
"md"
variant
"default" | "flat" | "destructive" | "outlined" | "image"
"default"
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
target
"_self" | "_blank" | "_parent" | "_top" | (string & {})
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
icon
string
rel
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"
"noopener""noreferrer""nofollow""sponsored""ugc"
prefetchedClass
string
prefetchOn
unknown
label
string
disabled
boolean
false
replace
boolean
custom
boolean
viewTransition
boolean
external
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean