Button

Default

The buttons are a fundamental part of any project, with Sax Design you can add a great button with a single line of code

the buttons have all the states as active, focus, hover, to make its implementation simpler and speed up the work

Code copied

<template>
  <div class="center">
    <s-button :active="active == 0" @click="active = 0"> Active </s-button>
    <s-button :active="active == 1" @click="active = 1"> Default </s-button>
    <s-button disabled>Disabled</s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Flat

You can change the full style towards flat of a button with the flat property that its value is a boolean, so just adding it will change the styles

Code copied

<template>
  <div class="center">
    <s-button type="flat" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="flat" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="flat" disabled> Disabled </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Border

You can change the full style towards border of a button with the border property that its value is a boolean so just adding it will change the styles

Code copied

<template>
  <div class="center">
    <s-button type="border" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="border" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="border" disabled> Disabled </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Gradient

You can change the full style towards Gradient of a button with the gradient property that its value is a boolean, so just adding it will change the styles

Gradient Auto Color

Gradient colors are automatically generated by the color property which in this example is the primary color

Code copied

<template>
  <div class="center">
    <s-button type="gradient" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="gradient" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="gradient" disabled> Disabled </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Relief

Change the style of the button to a relief aspect with the relief property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button type="relief" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="relief" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="relief" disabled> Disabled </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Transparent

Change the style of the button with the transparent property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button type="transparent" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="transparent" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="transparent" disabled> Disabled </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Shadow

Change the style of the button with the shadow property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button type="shadow" :active="active == 0" @click="active = 0">
      Active
    </s-button>
    <s-button type="shadow" :active="active == 1" @click="active = 1">
      Default
    </s-button>
    <s-button type="shadow" disabled> Disabled </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Color

Change the color of the Button component with the color property and the color value for example (#fff, rgba (100,10,5) or the main colors of Sax Design), this will only affect the component and its value can be dynamic

Allowed values

The color prop supports the Sax Design theme colors: primary, success, danger, warn, dark
Custom RGB and HEX colors are also supported.

Boolean color props (optional)

Theme colors can also be enabled directly through Boolean props.
For example, add warn to use the warning color.

Code copied

<template>
  <div class="center">
    <s-button :active="active == 0" @click="active = 0"> Default </s-button>
    <s-button
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      Success
    </s-button>
    <s-button
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      Danger
    </s-button>
    <s-button
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      Warn
    </s-button>
    <s-button
      color="dark"
      type="shadow"
      :active="active == 4"
      @click="active = 4"
    >
      Dark
    </s-button>
    <s-button
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      HEX
    </s-button>
    <s-button
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      RGB
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Icon

If you need an icon-only button use the icon property, the property is a boolean so you can add it without any value.

This property makes the button have a specific size making it the same width and height, do not use when it is icon and text

Default icons

Sax Design Vue renders build-time Iconify SVG data. Built-in controls, such as close buttons in Alert or Popup, use SVG icons and require no external icon font. Use the #icon slot when a product needs another icon.

Find and use icons

Search Boxicons for a collection and copy its prefix:name value into SIcon.

Code copied

<template>
  <div class="center">
    <s-button icon :active="active == 0" @click="active = 0">
      <s-icon  name="bx:home-alt" />
    </s-button>

    <s-button
      icon
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      <s-icon  name="bxs:phone-call" />
    </s-button>

    <s-button
      icon
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      <s-icon  name="bxs:heart" />>
    </s-button>

    <s-button
      icon
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      <s-icon  name="bxs:bell-ring" />
    </s-button>

    <s-button
      icon
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      <s-icon  name="bxs:paper-plane" />
    </s-button>

    <s-button
      icon
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      <s-icon  name="bxs:purchase-tag" />
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Icon - Text

If you need a button with text and icon you can do them by adding them in the slot default.

Code copied

<template>
  <div class="center">
    <s-button :active="active == 0" @click="active = 0">
      <s-icon  name="bx:home-alt" /> Home
    </s-button>

    <s-button
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      <s-icon  name="bxs:phone-call" /> Call
    </s-button>

    <s-button
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      <s-icon  name="bxs:heart" /> Like
    </s-button>

    <s-button
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      <s-icon  name="bxs:bell-ring" /> Notifications
    </s-button>

    <s-button
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      <s-icon  name="bxs:paper-plane" /> Send
    </s-button>

    <s-button
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      <s-icon  name="bxs:purchase-tag" /> Save
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Circle

You can completely round the corners with the circle property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button shape="circle" :active="active == 0" @click="active = 0">
      Home
    </s-button>

    <s-button
      shape="circle"
      icon
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      <s-icon  name="bxs:phone-call" />
    </s-button>

    <s-button
      shape="circle"
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      <s-icon  name="bxs:heart" /> Like
    </s-button>

    <s-button
      shape="circle"
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      Notifications <s-icon  name="bxs:bell-ring" />
    </s-button>

    <s-button
      shape="circle"
      icon
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      <s-icon  name="bxs:paper-plane" />
    </s-button>

    <s-button
      shape="circle"
      icon
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      <s-icon  name="bxs:purchase-tag" />
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Square

You can make all the corners completely straight with the Square property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button shape="square" :active="active == 0" @click="active = 0">
      Home
    </s-button>

    <s-button
      shape="square"
      icon
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      <s-icon  name="bxs:phone-call" />
    </s-button>

    <s-button
      shape="square"
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      <s-icon  name="bxs:heart" /> Like
    </s-button>

    <s-button
      shape="square"
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      Notifications <s-icon  name="bxs:bell-ring" />
    </s-button>
    <s-button
      shape="square"
      icon
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      <s-icon  name="bxs:paper-plane" />
    </s-button>
    <s-button
      shape="square"
      icon
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      <s-icon  name="bxs:purchase-tag" />
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Size

Change the size of the entire button including padding, font-size and border with the size property

values:

• xl
• l
• default
• small
• mini

Code copied

<template>
  <div class="center">
    <s-button size="xl" :active="active == 0" @click="active = 0">
      XLarge
    </s-button>
    <s-button size="large" :active="active == 1" @click="active = 1">
      Large
    </s-button>
    <s-button :active="active == 2" @click="active = 2"> Default </s-button>
    <s-button size="small" :active="active == 3" @click="active = 3">
      Small
    </s-button>
    <s-button size="mini" :active="active == 4" @click="active = 4">
      Mini
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const active = ref<number>(0)
</script>

Loading

Use loading while an action is running. Select pulse, ripple, or shimmer with loading-type; each preset keeps the original label and icon recognizable, preserves button size, and prevents clicks. ripple uses two clear pulsing waves. Implementation keeps one loading element and switches only the root state class. Use #loading for fully custom content.

Code copied

<template>
  <div class="loading-demo">
    <section
      v-for="loadingType in loadingTypes"
      :key="loadingType"
      class="loading-demo__preset"
    >
      <div class="loading-demo__heading">
        <strong>{{ labels.types[loadingType] }}</strong>
        <code>loading-type="{{ loadingType }}"</code>
      </div>

      <div class="loading-demo__buttons">
        <s-button
          :loading="loading"
          :loading-type="loadingType"
          color="primary"
        >
          <s-icon  name="bxs:save" />
          {{ labels.save }}
        </s-button>

        <s-button
          :loading="loading"
          :loading-type="loadingType"
          icon
          color="success"
          type="flat"
          :aria-label="labels.call"
        >
          <s-icon  name="bxs:phone-call" />
        </s-button>

        <s-button
          :loading="loading"
          :loading-type="loadingType"
          color="danger"
          type="border"
        >
          <s-icon  name="bxs:heart" />
          {{ labels.like }}
        </s-button>
      </div>
    </section>
  </div>

  <div class="loading-demo__control">
    <s-button type="flat" @click="loading = !loading">
      {{ loading ? labels.showContent : labels.showLoading }}
    </s-button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const loading = ref(true)
const loadingTypes = ['pulse', 'ripple', 'shimmer'] as const

const labels = computed(() => {
  const isZh = route.path.startsWith('/zh/')

  return isZh
    ? {
        save: '保存更改',
        call: '拨打电话',
        like: '喜欢',
        showContent: '查看原内容',
        showLoading: '查看加载态',
        types: {
          pulse: '呼吸光轨',
          ripple: '双层脉冲波',
          shimmer: '流光扫描',
        },
      }
    : {
        save: 'Save changes',
        call: 'Call',
        like: 'Like',
        showContent: 'Show content',
        showLoading: 'Show loading',
        types: {
          pulse: 'Pulse rail',
          ripple: 'Double pulse wave',
          shimmer: 'Surface shimmer',
        },
      }
})
</script>

<style scoped>
.loading-demo {
  display: grid;
  gap: 22px;
}

.loading-demo__preset {
  display: grid;
  gap: 12px;
}

.loading-demo__heading,
.loading-demo__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.loading-demo__heading {
  justify-content: space-between;
}

.loading-demo__heading code {
  opacity: 0.68;
}

.loading-demo__buttons {
  min-height: 42px;
}

.loading-demo__control {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
</style>

Click rate limiting

debounce and throttle limit emitted click events without changing button layout. debounce uses a trailing invocation and defaults to 50ms. throttle emits the first click immediately; set debounce="false" before assigning a numeric throttle delay. If both props are numbers, the component logs an error and applies only debounce.

Code copied

<template>
  <div class="button-click-limit-demo">
    <div class="button-click-limit-demo__item">
      <s-button :debounce="400" @click="debounceCount += 1">
        {{ isZh ? '防抖点击' : 'Debounced click' }}
      </s-button>
      <span>{{ isZh ? '触发次数' : 'Emitted' }}: {{ debounceCount }}</span>
    </div>

    <div class="button-click-limit-demo__item">
      <s-button
        :debounce="false"
        :throttle="1000"
        type="border"
        @click="throttleCount += 1"
      >
        {{ isZh ? '节流点击' : 'Throttled click' }}
      </s-button>
      <span>{{ isZh ? '触发次数' : 'Emitted' }}: {{ throttleCount }}</span>
    </div>

    <s-button type="flat" @click="reset">
      {{ isZh ? '重置' : 'Reset' }}
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const isZh = computed(() => route.path.startsWith('/zh/'))
const debounceCount = ref(0)
const throttleCount = ref(0)

const reset = () => {
  debounceCount.value = 0
  throttleCount.value = 0
}
</script>

Upload

Now you can add a status of sending or uploading data to the server with the upload property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button upload :active="active == 0" @click="active = 0"> Home </s-button>

    <s-button
      upload
      icon
      color="success"
      type="flat"
      :active="active == 1"
      @click="active = 1"
    >
      <s-icon  name="bxs:phone-call" />
    </s-button>

    <s-button
      upload
      color="danger"
      type="border"
      :active="active == 2"
      @click="active = 2"
    >
      <s-icon  name="bxs:heart" /> Like
    </s-button>

    <s-button
      upload
      color="warn"
      type="gradient"
      :active="active == 3"
      @click="active = 3"
    >
      Notifications <s-icon  name="bxs:bell-ring" />
    </s-button>

    <s-button
      upload
      color="dark"
      type="transparent"
      :active="active == 5"
      @click="active = 5"
    >
      Dark
    </s-button>

    <s-button
      upload
      icon
      color="#7d33ff"
      type="relief"
      :active="active == 5"
      @click="active = 5"
    >
      <s-icon  name="bxs:paper-plane" />
    </s-button>

    <s-button
      upload
      icon
      color="rgb(59,222,200)"
      type="gradient"
      :active="active == 6"
      @click="active = 6"
    >
      <s-icon  name="bxs:purchase-tag" />
    </s-button>
  </div>
</template>

<script setup lang="ts">

const active = ref<number>(0)
</script>

Block

You can make the button have the full width allowed with the block property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button block>
      <s-icon  name="bxs:paint-roll" />
      Edit Theme
    </s-button>
  </div>
</template>

Animate

You can create an animation to the component by adding template ``#animate `and the content will be the one that appears when the component is animated

You can also change the type of animation with the animation-type property and the allowed values ​​are ( vertical, scale, rotate)

Code copied

<template>
  <div class="center">
    <s-button>
      Home
      <template #animate>
        <s-icon  name="bx:home-alt" />
      </template>
    </s-button>

    <s-button type="flat" color="success" animation-type="vertical">
      Message
      <template #animate> <s-icon  name="bx:mail-send" /> Send </template>
    </s-button>

    <s-button
      type="gradient"
      style="min-width: 60px"
      color="warn"
      animation-type="scale"
    >
      <s-icon  name="bxs:shopping-bag" />
      <template #animate> Store </template>
    </s-button>

    <s-button icon type="relief" color="danger" animation-type="rotate">
      <s-icon  name="bx:like" />
      <template #animate>
        <s-icon  name="bxs:like" />
      </template>
    </s-button>
  </div>
</template>

Social

Using the colors of social networks is very common in a project either a login button or a share button so Sax Design makes it easy for you to search for each color and just by putting the name of the network you already change the whole style of the component

Supported colors: (facebook, twitter, youtube, pinterest, linkedin, snapchat, whatsapp, tumblr, reddit, spotify, amazon, medium, vimeo, skype, dribbble, slack, yahoo, twitch, discord, telegram, google-plus, messenger)

Code copied

<template>
  <div class="center">
    <s-button icon color="facebook">
      <s-icon  name="bxl:facebook-square" />
    </s-button>

    <s-button icon color="twitter">
      <s-icon  name="bxl:twitter" />
    </s-button>

    <s-button icon color="youtube">
      <s-icon  name="bxl:youtube" />
    </s-button>

    <s-button icon color="linkedin">
      <s-icon  name="bxl:linkedin" />
    </s-button>

    <s-button icon color="whatsapp">
      <s-icon  name="bxl:whatsapp" />
    </s-button>

    <s-button icon color="twitch">
      <s-icon  name="bxl:twitch" />
    </s-button>

    <s-button icon color="medium">
      <s-icon  name="bxl:medium" />
    </s-button>

    <s-button icon color="skype">
      <s-icon  name="bxl:skype" />
    </s-button>

    <s-button icon color="slack">
      <s-icon  name="bxl:slack-old" />
    </s-button>

    <s-button icon color="messenger">
      <s-icon  name="bxl:messenger" />
    </s-button>

    <s-button icon color="tumblr">
      <s-icon  name="bxl:tumblr" />
    </s-button>

    <s-button icon color="dribbble">
      <s-icon  name="bxl:dribbble" />
    </s-button>

    <s-button icon color="google-plus">
      <s-icon  name="bxl:google-plus" />
    </s-button>

    <s-button icon color="vimeo">
      <s-icon  name="bxl:vimeo" />
    </s-button>

    <s-button icon color="pinterest">
      <s-icon  name="bxl:pinterest" />
    </s-button>

    <s-button icon color="spotify">
      <s-icon  name="bxl:spotify" />
    </s-button>

    <s-button icon color="discord">
      <s-icon  name="bxl:discord" />
    </s-button>

    <s-button icon color="amazon">
      <s-icon  name="bxl:amazon" />
    </s-button>

    <s-button icon color="reddit">
      <s-icon  name="bxl:reddit" />
    </s-button>
  </div>
</template>

Floating

You can make a float style button easily with the Floating property, the property is a boolean so you can add it without any value.

these buttons usually do an important action in specific and go with a fixed position in the lower corner

Code copied

<template>
  <div class="center">
    <s-button shape="circle" icon type="floating">
      <s-icon  name="bx:plus" />
    </s-button>

    <s-button color="whatsapp" shape="circle" icon type="floating">
      <s-icon  name="bxl:whatsapp" />
    </s-button>

    <s-button color="#ff3e4e" shape="circle" icon type="floating">
      <s-icon  name="bx:up-arrow-alt" />
    </s-button>

    <s-button shape="circle" icon disabled type="floating">
      <s-icon  name="bxs:chat" />
    </s-button>
  </div>
</template>

Group

If you need to make a group of buttons you can use the sub-component <s-button-group> </s-button-group> and inside the default slot put the buttons you want to group

Code copied

<template>
  <div class="center">
    <s-button-group>
      <s-button> One </s-button>
      <s-button> Two </s-button>
      <s-button> Three </s-button>
      <s-button> four </s-button>
    </s-button-group>

    <span class="divider" />

    <s-button-group>
      <s-button type="flat" icon>
        <s-icon  name="bx:play" />
      </s-button>
      <s-button type="flat" icon>
        <s-icon  name="bx:pause" />
      </s-button>
      <s-button type="flat" icon>
        <s-icon  name="bx:fast-forward" />
      </s-button>
      <s-button type="flat" icon>
        <s-icon  name="bx:shuffle" />
      </s-button>
    </s-button-group>

    <span class="divider" />

    <s-button-group>
      <s-button type="border"> <s-icon  name="bxs:pencil" /> Edit </s-button>
      <s-button type="border" icon>
        <s-icon  name="bx:font-color" />
      </s-button>
      <s-button type="border" icon>
        <s-icon  name="bx:align-middle" />
      </s-button>
      <s-button type="border">
        <s-icon  name="bx:font-size" /> Font size
      </s-button>
    </s-button-group>

    <span class="divider" />

    <s-button-group>
      <s-button type="relief"> <s-icon  name="bx:home-alt" /> Home </s-button>
      <s-button type="relief">
        <s-icon  name="bxs:phone-call" /> Contact
      </s-button>
      <s-button type="relief" loading>
        <s-icon  name="bxs:cart-alt" /> Products
      </s-button>
      <s-button type="relief" upload>
        <s-icon  name="bxs:envelope" /> Send
      </s-button>
    </s-button-group>
  </div>
</template>

Toggle

This is an example of what you can achieve with simple logic and few lines of code.

Code copied

<template>
  <div class="center">
    <s-button
      :icon="successMail"
      :upload="sendingMail"
      :color="successMail ? 'success' : 'primary'"
      @click="handleClickMail"
    >
      <span v-if="!successMail">
        <s-icon  name="bx:mail-send" />
        Send
      </span>

      <s-icon v-else  name="bx:check" />
    </s-button>

    <s-button
      :animate-inactive="successFace"
      :loading="loadingFace"
      color="facebook"
      @click="handleClickFace"
    >
      <s-icon  name="bxl:facebook-square" />
      {{ successFace ? 'Logout' : 'Facebook' }}
      <template #animate> <s-icon  name="bx:user" /> Login </template>
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sendingMail = ref<boolean>(false)
const successMail = ref<boolean>(false)
const loadingFace = ref<boolean>(false)
const successFace = ref<boolean>(false)

const handleClickMail = () => {
  sendingMail.value = true

  setTimeout(() => {
    sendingMail.value = false
    successMail.value = !successMail.value
  }, 2000)
}
const handleClickFace = () => {
  loadingFace.value = true

  setTimeout(() => {
    loadingFace.value = false
    successFace.value = !successFace.value
  }, 2000)
}
</script>

<style scoped lang="scss">
span {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Ripple New

You can change ripple style of a button with the ripple property and the allowed values are

• reverse
• cut

Code copied

<template>
  <div class="center">
    <s-button> Default </s-button>
    <s-button ripple="reverse"> Reverse </s-button>
    <s-button ripple="cut"> Cut </s-button>
  </div>
</template>

API