Button

Unify UI provide 3 types of button.

• Primary Button
• Secondary Button
• Soft Button

Primary Button

View Source

<script setup lang="ts">
import { UniButton } from "unify-ui";
</script>

<template>
  <div class="container">
    <div>
      <UniButton type="primary" size="xs">Button size: xs</UniButton>
    </div>

    <div>
      <UniButton type="primary" size="s">Button size: s</UniButton>
    </div>

    <div>
      <UniButton type="primary" size="m">Button size: m</UniButton>
    </div>

    <div>
      <UniButton type="primary" size="l"> Button size: l </UniButton>
    </div>

    <div>
      <UniButton type="primary" size="xl">Button size: xl</UniButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
</style>

Secondary Button

View Source

<script setup lang="ts">
import { UniButton } from "unify-ui";
</script>

<template>
  <div class="container">
    <div>
      <UniButton type="secondary" size="xs">Button size: xs</UniButton>
    </div>

    <div>
      <UniButton type="secondary" size="s">Button size: s</UniButton>
    </div>

    <div>
      <UniButton type="secondary" size="m">Button size: m</UniButton>
    </div>

    <div>
      <UniButton type="secondary" size="l"> Button size: l </UniButton>
    </div>

    <div>
      <UniButton type="secondary" size="xl">Button size: xl</UniButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
</style>

Soft Button

View Source

<script setup lang="ts">
import { UniButton } from "unify-ui";
</script>

<template>
  <div class="container">
    <div>
      <UniButton type="soft" size="xs">Button size: xs</UniButton>
    </div>

    <div>
      <UniButton type="soft" size="s">Button size: s</UniButton>
    </div>

    <div>
      <UniButton type="soft" size="m">Button size: m</UniButton>
    </div>

    <div>
      <UniButton type="soft" size="l"> Button size: l </UniButton>
    </div>

    <div>
      <UniButton type="soft" size="xl">Button size: xl</UniButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
</style>

Rounded Button

View Source

<script setup lang="ts">
import { UniButton } from "unify-ui";
</script>

<template>
  <div class="container">
    <div>
      <UniButton rounded>Button1</UniButton>
    </div>

    <div>
      <UniButton type="primary" rounded>Button2</UniButton>
    </div>

    <div>
      <UniButton type="secondary" rounded>Button3</UniButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
</style>

Disabled

View Source

<script setup lang="ts">
import { UniButton } from "unify-ui";

function handleClick() {
  console.log("button disabled");
}
</script>

<template>
  <div class="container">
    <div>
      <UniButton disabled @click="handleClick">Secondary Button</UniButton>
    </div>

    <div>
      <UniButton type="primary" disabled>Primary Button</UniButton>
    </div>

    <div>
      <UniButton type="soft" disabled>Soft Button</UniButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
</style>

API

Properties

withDefaults(
  defineProps<{
    type?: "secondary" | "primary" | "soft";
    size?: "xs" | "s" | "m" | "l" | "xl";
    rounded?: boolean;
    disabled?: boolean;
  }>(),
  {
    type: "secondary",
    size: "m",
  }
);

Events

const emits = defineEmits<{
  (e: "click", event: MouseEvent): void;
}>();

Slots

const slots = defineSlots<{
  default(props: {}): any;
}>();