Button

Display a number of button variants.

Usage

A generic button component. See CIconButton, CLinkButton and CLink for other use cases.

<template>
  <CButton>
    Button
  </CButton>
</template>

Disabled

<template>
<CButton disabled>Button</CButton>
</template>

Loading

<template>
<CButton loading>Button</CButton>
</template>

Size

<template>
<CButton size="xl">Button</CButton>
</template>

Icon

Use the icon prop to prepend button contents with an icon.

<template>
<CButton icon="i-heroicons-globe-alt">Button</CButton>
</template>

Variants

Use the variant prop to display different Button variants such as outlined and destructive.

<template>
<CButton variant="outlined">Button</CButton>
</template>

Slots

icon

Use the #icon slot to display prepended button content.

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

<template>
  <CButton>
    <template #icon>
      <CIcon name="i-heroicons-globe-alt" />
    </template>
    Button
  </CButton>
</template>

Props

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