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

Prop Default Type
to string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
Route Location the link should navigate to when clicked on.
disabledfalseboolean
size'md' "md" | "sm" | "lg" | "xl" | "2xl"
variant'default' "default" | "destructive" | "outlined" | "gradient" | "subtle"
icon string
appendIcon string
loadingfalseboolean
type'button' "reset" | "submit" | "button"
blockfalseboolean
label 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'_self' 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.