Button

The Button component is a 'call to action' element that can display a loading icon upon click and/or toggle between an active and disabled state.

The Button component utilizes several props to determine the form and function of a Button instance. Refer to the following examples for appropriate syntax and usage.

Demo

Use a ci-button to capture click events and do something.

<template>
  <div>
    <ci-button @click="count+=1">Button</ci-button>
    Clicks: {{ count }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

Variant

Use variant to change the style and appearance of your button.

<template>
  <DemoGrid>
    <ci-button>Brand</ci-button>
    <ci-button variant="brand-outline">Brand Outline</ci-button>
    <ci-button variant="brand-text">Brand Text</ci-button>

    <ci-button variant="info">Info</ci-button>
    <ci-button variant="info-outline">Info Outline</ci-button>
    <ci-button variant="info-text">Info Text</ci-button>

    <ci-button variant="danger">Danger</ci-button>
    <ci-button variant="danger-outline">Danger Outline</ci-button>
    <ci-button variant="danger-text">Danger Text</ci-button>

    <ci-button variant="muted-outline">Muted Outline</ci-button>
  </DemoGrid>
</template>

Size

Use size to change the size of your button.

<template>
  <DemoGrid>
    <ci-button size="md">Medium</ci-button>
    <ci-button size="sm">Small</ci-button>
    <ci-button>Default</ci-button>
  </DemoGrid>
</template>

Fullwidth

Use fullwidth to make your button fill its container. If needed you can also leverage classes like .ci-max-width-sm.

<template>
  <div>
    <ci-button fullwidth>Button</ci-button>
    <br><br>
    <ci-button fullwidth class="ci-max-width-sm">Button</ci-button>
  </div>
</template>

Disabled

Add the disabled attribute to disable clicks to the button and give it a disabled appearance, based on the variant.

<template>
  <DemoGrid>
    <ci-button disabled>Brand</ci-button>
    <ci-button disabled variant="brand-outline">Brand Outline</ci-button>
    <ci-button disabled variant="brand-text">Brand Text</ci-button>

    <ci-button disabled variant="info">Info</ci-button>
    <ci-button disabled variant="info-outline">Info Outline</ci-button>
    <ci-button disabled variant="info-text">Info Text</ci-button>

    <ci-button disabled variant="danger">Danger</ci-button>
    <ci-button disabled variant="danger-outline">Danger Outline</ci-button>
    <ci-button disabled variant="danger-text">Danger Text</ci-button>

    <ci-button disabled variant="muted-outline">Muted Outline</ci-button>
  </DemoGrid>
</template>

Loading

Use the loading prop to show a spinner in place of your button's text.

<template>
  <ci-button
    :loading="buttonLoading"
    @click="simulateButtonLoading"
  >
    Toggle Loading
  </ci-button>
</template>

<script>
export default {
  data() {
    return {
      buttonLoading: false,
    };
  },
  methods: {
    simulateButtonLoading () {
      this.buttonLoading = true;
      setTimeout(() => { this.buttonLoading = false }, 3000);
    }
  }
}
</script>

Icons in Buttons

To add an Icon to your button, include a CiIcon in the default slot. The appropriate right or left margins will be applied to the icons automatically. The color of the icon will be set to the button’s text color.

<template>
  <DemoGrid>
    <ci-button>
      <ci-icon icon="circle-check" />
      Button
    </ci-button>
    <ci-button variant="brand-outline">
      Button
      <ci-icon icon="circle-check" />
    </ci-button>
    <ci-button>
      Text
      <ci-icon icon="chevron-right-outline" />
      Text
    </ci-button>
    <ci-button>
      <ci-icon icon="circle-check" />
      <ci-icon icon="chevron-up-outline" />
    </ci-button>
  </DemoGrid>
</template>

Icon Buttons

When a button only contains a CiIcon we consider it an "Icon Button". Icon Buttons always have equal height and width.

<template>
  <DemoGrid>
    <ci-button size="md">
      <ci-icon icon="chevron-right-outline" />
    </ci-button>
    <ci-button>
      <ci-icon icon="chevron-up-outline" />
    </ci-button>
  </DemoGrid>
</template>

Link Buttons

Use the href and to prop to make your button link to a webpage or route when clicked. You can also pass a @click event if you need to do something programmatically.

<template>
  <DemoGrid>
    <ci-button href="https://github.com/gitzyn/cirrus-stratus-component-library/">Href Button</ci-button>
    <ci-button to="/components/button">To Button</ci-button>
  </DemoGrid>
</template>