Usage

Default

Use the default slot to set the text of the component.

Colors

Use the color prop to customize the component's color.

Variants

Use the variant prop to customize the component's appearance.

Sizes

Use the size prop to customize the component's size.

Rounded

Use the border-radius prop to customize the border radius.

Icons

Use the icon-before to position an icon before it's default slot or icon-after to position it after it's text. If the default slot has no content, it will render as an icon button.

<script setup lang="ts">
import { CLButton, CLColors, CLColorVariants, CLIconNames } from '@codeandfunction/callaloo'
</script>

<template>
  <CLButton :color="CLColors.Primary" :icon-before="CLIconNames.UserCircle" :variant="CLColorVariants.Soft">Before</CLButton>
  <CLButton :color="CLColors.Primary" :icon-before="CLIconNames.MoodTongueWink" :variant="CLColorVariants.Soft" />
  <CLButton :color="CLColors.Primary" :icon-after="CLIconNames.TrashCan" :variant="CLColorVariants.Soft">After</CLButton>
</template>

States

A button can have various states, which can be set via the active, busy and disabled props.

<script setup lang="ts">
import { CLButton, CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLButton :color="CLColors.Primary" busy>Waiting ...</CLButton>
  <CLButton :color="CLColors.Primary" busy />
  <CLButton :color="CLColors.Primary" active>Active</CLButton>
  <CLButton :color="CLColors.Primary" disabled>Disabled</CLButton>
</template>

Props