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

Prop Default Type
to string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
Route Location the link should navigate to when clicked on.
disabledfalseboolean
label string
size'md' "md" | "sm" | "lg" | "xl" | "2xl" | "xs"
variant'default' "default" | "flat" | "destructive" | "outlined" | "subtle" | "image"
type'button' "reset" | "submit" | "button"
icon string
custom false
Whether RouterLink should not wrap its content in an a tag. Useful when using v-slot to create a custom RouterLink
target null | "_self" | "_blank" | "_parent" | "_top" | string & {}
Where to display the linked URL, as the name for a browsing context.
trailingSlash "append" | "remove"
An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.