Clerri UI Buttons

CButton is an extension to standard input element with icons and theming.

Button Severities

Clerri UI provides several button severities to indicate different actions or states.

The available severities are:

• primary
• secondary
• tertiary
• neutral
• contrast
• success
• error
• warning

You specify the severity using the severity prop on the <CButton> component:

<CButton 
    severity="danger" 
    label="Delete User"
/>

TIP

primary is the default severity, it will be applied if no severity is specified.

Outline Buttons

You can create outline buttons by setting the outlined prop.

<CButton 
    severity="primary"
    label="Primary Outlined"
    outlined
/>

Rounded Buttons

You can create rounded buttons by setting the rounded prop.

<CButton
    severity="primary"
    label="Primary Rounded"
    rounded
/>

TIP

You can combine outlined and rounded props to create outlined rounded buttons.

Disabled Buttons

You can create disabled buttons by setting the disabled prop.

<CButton
    severity="primary"
    label="Primary"
    disabled
/>

Text Buttons

You can create text buttons by setting the text prop.

<CButton
    severity="primary"
    label="Primary Text"
    text
/>

TIP

You can combine text and rounded props to create text rounded buttons.

Icon Buttons

You can create icon buttons by using the icon prop to specify a Prime Vue Icon. Please refer to the Prime Vue Icons documentation for a list of available icons.

You would normally use the PrimeIcons constant to specify the icons.

<template>
  <CButton 
    severity="primary"
    :icon="PrimeIcons.CHECK"
    label="Save"
  />
</template>

<script lang="ts" setup>
  import { PrimeIcons } from '@primevue/core/api'
</script>

Icon Position

You can specify the position of the icon using the icon-pos prop. The available positions are left (default) and right.

<template>
  <CButton 
    severity="primary"
    :icon="PrimeIcons.STAR"
    icon-pos="right"
    label="Favorites"
  />
</template>

Icon Only

You can create an icon-only button by setting the icon prop without a label.

<template>
  <CButton
    severity="primary"
    :icon="PrimeIcons.HEART"
  />
</template>

TIP

You can combine icon with other props like outlined, rounded, and text to create different styles of icon buttons.

Raised Buttons

You can create raised buttons by setting the raised prop.

<CButton
    severity="success"
    label="Success Raised"
    raised
/>

Button Groups

You can group multiple buttons together using the <CButtonGroup> component.

<template>
    <CButtonGroup>
        <CButton label="Button 1"  severity="success" />
        <CButton label="Button 2" severity="warning" />
        <CButton label="Button 3" severity="error" />
    </CButtonGroup>
</template>

Split Button

You can create a split button by using a Button Group with a normal button and a Popup Menu.

<template>
  <CButtonGroup>
    <CButton label="Commit" outlined />
    <CButton 
      :icon="PrimeIcons.CHEVRON_DOWN" 
      outlined
      @click="popupMenu?.toggle"
    />
  </CButtonGroup>

  <CMenu 
      :model="items" 
      popup 
      ref="popupMenu" 
/>
</template>

<script lang="ts" setup>
  import { PrimeIcons } from '@primevue/core/api';
  import { ref } from 'vue';

  const popupMenu = ref<InstanceType<typeof CMenu>>();
  const items = [
    { label: 'Commit and Push', icon: PrimeIcons.UPLOAD },
    { label: 'Force Push', icon: PrimeIcons.EXCLAMATION_TRIANGLE }
  ];
</script>

Sizes

Button provides small and large sizes as alternatives to the base. You can set the size using the size prop.

<template>
  <CButton 
      label="Small" 
      icon="pi pi-check" 
      size="small" 
  />
  <CButton 
      label="Normal" 
      icon="pi pi-check" 
  />
  <CButton 
      label="Large" 
      icon="pi pi-check" 
      size="large" 
  />
</template>