Button

Basic Usage

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div>
    <CButton label="A Basic Button" />
  </div>
  <div>
    <CButton label="A Outlined Button" outlined />
  </div>
  <div>
    <CButton label="A Rounded Button" rounded />
  </div>
  <div>
    <CButton label="A Round Button" round />
  </div>
  <div>
    <CButton label="A Flat Button" round flat />
  </div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div>
    <CButton label="A Basic Button" />
  </div>
  <div>
    <CButton label="A Outlined Button" outlined />
  </div>
  <div>
    <CButton label="A Rounded Button" rounded />
  </div>
  <div>
    <CButton label="A Round Button" round />
  </div>
  <div>
    <CButton label="A Flat Button" round flat />
  </div>
</div>
svelte
Click fold/expand code

Themes

<div class="grid grid-cols-3 md:grid-cols-2 gap-4">
  <div>
    <CButton label="A Primary (default) Button" />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" />
  </div>
  <div>
    <CButton label="A Primary (default) Button" outlined />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" outlined />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" outlined />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" outlined />
  </div>
  <div>
    <CButton label="A Primary (default) Button" flat />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" flat />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" flat />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" flat />
  </div>
</div>
<div class="grid grid-cols-3 md:grid-cols-2 gap-4">
  <div>
    <CButton label="A Primary (default) Button" />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" />
  </div>
  <div>
    <CButton label="A Primary (default) Button" outlined />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" outlined />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" outlined />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" outlined />
  </div>
  <div>
    <CButton label="A Primary (default) Button" flat />
  </div>
  <div>
    <CButton label="A Secondary Button" theme="secondary" flat />
  </div>
  <div>
    <CButton label="A Warning Button" theme="warning" flat />
  </div>
  <div>
    <CButton label="A Negative Button" theme="negative" flat />
  </div>
</div>
svelte
Click fold/expand code

Sizes

<CButton size="xs" label="XS Button" rounded />
<CButton size="sm" label="SM Button" rounded />
<CButton label="Normal Button (default)" rounded />
<CButton label="LG Button" size="lg" rounded />
<CButton label="XL Button" size="xl" rounded />
<CButton size="xs" label="XS Button" rounded />
<CButton size="sm" label="SM Button" rounded />
<CButton label="Normal Button (default)" rounded />
<CButton label="LG Button" size="lg" rounded />
<CButton label="XL Button" size="xl" rounded />
svelte
Click fold/expand code

Block button

<CButton block label="Block Button" />
<div class="c-mt-md">
  <CButton block label="Block Button" theme="warning" round />
</div>
<div class="c-mt-md">
  <CButton block label="Block Button" theme="negative" rounded />
</div>
<CButton block label="Block Button" />
<div class="c-mt-md">
  <CButton block label="Block Button" theme="warning" round />
</div>
<div class="c-mt-md">
  <CButton block label="Block Button" theme="negative" rounded />
</div>
svelte
Click fold/expand code

Status

<CButton label="A Disabled Button" disabled />
<CButton label="A Loading Button" loading />
<CButton label="A Disabled Button" disabled />
<CButton label="A Loading Button" loading />
svelte
Click fold/expand code

Custom loading instance

<CButton loading label="Loading...">
  <CLoadingHourglass slot="loading" />
</CButton>
<CButton loading label="Loading..." theme="secondary">
  <CLoadingBar slot="loading" />
</CButton>
<CButton loading label="Loading...">
  <CLoadingHourglass slot="loading" />
</CButton>
<CButton loading label="Loading..." theme="secondary">
  <CLoadingBar slot="loading" />
</CButton>
svelte
Click fold/expand code

Icon button

<CButton icon style="font-size: 2rem;">
  <div class="i-openmoji-apple" />
</CButton>
<CButton icon style="font-size: 4rem;" outlined theme="warning">
  <div class="i-openmoji-banana" />
</CButton>
<CButton icon style="font-size: 6rem;" theme="negative">
  <div class="i-openmoji-peach" />
</CButton>
<CButton icon style="font-size: 2rem;">
  <div class="i-openmoji-apple" />
</CButton>
<CButton icon style="font-size: 4rem;" outlined theme="warning">
  <div class="i-openmoji-banana" />
</CButton>
<CButton icon style="font-size: 6rem;" theme="negative">
  <div class="i-openmoji-peach" />
</CButton>
svelte
Click fold/expand code

CButton Props

  • label
    string
    default:

    The text of the button. You can also use the default slot to cover this prop

  • outlined
    boolean
    default: false

    Determine button use outlined style or not.

  • flat
    boolean
    default: false

    Determine whether the button has flat style or not.

  • rounded
    boolean
    default: false

    Determine the button has a rounded border or not.

  • disabled
    boolean
    default: false

    Determine the button is disalbed or not.

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of the button.

  • round
    boolean
    default: false

    Determine the button has a half circle round border or not.

  • block
    boolean
    default: false

    Determine the button take up full width or not.

  • loading
    boolean
    default: false

    Determine the button is in loading state or not.

  • icon
    boolean
    default: false

    Determine the button show as a icon button, a full circle style.

  • theme
    'primary' | 'secondary' | 'warning' | 'negative'
    default: undefined

    The color theme of the button.

  • style
    string
    default:

    Custom style of the button.

CButton Events

  • click

    Emit when button is clicked. Notice that loading and disabled button won't trigger this event.

CButton Slots

  • default

    The internal content of the button. This slot can override label prop

  • loading

    Customize the loading content. Used when you don't want to use the default loading style

CButton Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55