Casual UI - Vue

Basic

<template>
  <c-button label="Normal Button" />
  <c-button
    label="Outlined Button"
    outlined
  />
  <c-button
    label="Rounded Button"
    rounded
  />
  <c-button
    label="Round Button"
    round
  />
  <c-button
    label="Flat Button"
    flat
    rounded
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Themes

<template>
  <div class="c-row c-gutter-md c-wrap">
    <div>
      <c-button label="Primary" theme="primary" />
    </div>
    <div>
      <c-button label="Secondary" theme="secondary" />
    </div>
    <div>
      <c-button
        label="Warning"
        theme="warning"
      />
    </div>
    <div>
      <c-button
        label="Negative"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="Primary"
        theme="primary"
        outlined
      />
    </div>
    <div>
      <c-button
        label="Secondary"
        theme="secondary"
        outlined
      />
    </div>
    <div>
      <c-button
        label="Warning"
        theme="warning"
        outlined
      />
    </div>
    <div>
      <c-button
        label="Negative"
        theme="negative"
        outlined
      />
    </div>
    <div>
      <c-button
        label="Primary"
        theme="primary"
        flat
      />
    </div>
    <div>
      <c-button
        label="Secondary"
        theme="secondary"
        flat
      />
    </div>
    <div>
      <c-button
        label="Warning"
        theme="warning"
        flat
      />
    </div>
    <div>
      <c-button
        label="Negative"
        theme="negative"
        flat
      />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Shapes

<script setup>
import { CButton } from '@casual-ui/vue'
</script>

<template>
  <CButton
    label="Rounded"
    rounded
  />
  <CButton
    label="Round"
    round
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Sizes

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-button
        label="xs Button"
        size="xs"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="sm Button"
        size="sm"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="md Button"
        size="md"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="lg Button"
        size="lg"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="xl Button"
        size="xl"
        theme="negative"
      />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Status

<template>
  <c-button
    label="Disabled Button"
    disabled
  />
  <c-button
    label="Loading Button"
    loading
  />
</template>
Click to open/fold code
Open Vue Repl Editor

Block

<template>
  <div class="c-mb-md">
    <c-button
      label="Block Button"
      block
      size="lg"
      theme="warning"
    />
  </div>
  <div class="c-mb-md">
    <c-button
      label="Block Button"
      block
      size="lg"
      rounded
    />
  </div>
  <div>
    <c-button
      label="Block Button"
      block
      size="lg"
      round
      theme="negative"
      outlined
    />
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Customize Loading Icon

<template>
  <c-button
    label="Loading"
    loading
  >
    <template #loading>
      <c-loading-audio />
    </template>
  </c-button>
  <c-button
    label="Loading"
    loading
    outlined
    round
  >
    <template #loading>
      <c-loading-dot />
    </template>
  </c-button>
  <c-button
    label="Loading"
    outlined
    rounded
    loading
  >
    <template #loading>
      <c-loading-bar />
    </template>
  </c-button>
</template>
Click to open/fold code
Open Vue Repl Editor

Icon Button

<script setup>
import {
  matBuild,
  matCoPresent,
  matDeviceHub,
} from '@quasar/extras/material-icons/index'
</script>

<template>
  <c-button icon>
    <c-icon :content="matBuild" />
  </c-button>
  <c-button
    icon
    theme="secondary"
  >
    <c-icon :content="matBuild" />
  </c-button>
  <c-button
    icon
    style="font-size: 24px"
    theme="warning"
  >
    <c-icon :content="matCoPresent" />
  </c-button>
  <c-button
    outlined
    icon
    style="font-size: 32px"
    theme="negative"
  >
    <c-icon :content="matDeviceHub" />
  </c-button>
</template>
Click to open/fold code
Open Vue Repl Editor

CButton API

Props
Slots
Events
label
string
Default  ''

The label text

outlined
boolean
Default  false

Determine whether the button is outlined or not.

disabled
boolean
Default  false

Determine whether the button is disabled or not.

size
CSize
Default  'md'

The size of button.

rounded
boolean
Default  false

Determine whether to have a rounded border or not.

round
boolean
Default  false

Determine whether to have a half circle border or not.

block
boolean
Default  false

Determine whether to display like a block element or not.

theme
CTheme
Default  'primary'

The theme color of button.

loading
boolean
Default  false

Determine whether the button is in loading status or not.

icon
boolean
Default  false

Determine whether the button display as a icon button or not.

flat
boolean
Default  false

Determine whether the button display a flat style or not.