Button

Last updated

2026-10-04 UTC

Demo

button/demo.vue

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

const loading = ref(false)
function fakeLoad() {
  loading.value = true
  setTimeout(() => (loading.value = false), 1600)
}
</script>

<template>
  <div class="flex flex-col gap-5">
    <div class="flex flex-wrap items-center gap-3">
      <YlfButton variant="primary">
        Sky blue Primary
      </YlfButton>
      <YlfButton variant="accent">
        Default accent
      </YlfButton>
      <YlfButton variant="accent" tone="sun">
        Discover featured
      </YlfButton>
      <YlfButton variant="secondary">
        Secondary
      </YlfButton>
      <YlfButton variant="soft">
        Soft
      </YlfButton>
      <YlfButton variant="ghost">
        Ghost
      </YlfButton>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <YlfButton variant="accent" tone="cyan">
        Open tools
      </YlfButton>
      <YlfButton variant="accent" tone="coral">
        Join an event
      </YlfButton>
      <YlfButton variant="accent" tone="pink">
        Start creating
      </YlfButton>
      <YlfButton variant="accent" tone="green">
        Finish setup
      </YlfButton>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <YlfButton variant="accent" tone="pink" appearance="soft">
        Save inspiration
      </YlfButton>
      <YlfButton variant="accent" tone="cyan" appearance="outline">
        Explore tools
      </YlfButton>
      <YlfButton variant="success" appearance="soft">
        Saved
      </YlfButton>
      <YlfButton variant="danger" appearance="outline">
        Remove content
      </YlfButton>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <YlfButton variant="success">
        Success
      </YlfButton>
      <YlfButton variant="warning">
        Warning
      </YlfButton>
      <YlfButton variant="danger">
        Danger
      </YlfButton>
      <YlfButton variant="secondary" disabled>
        Disabled
      </YlfButton>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <YlfButton size="sm">
        Small
      </YlfButton>
      <YlfButton size="md">
        Medium
      </YlfButton>
      <YlfButton size="lg">
        Large
      </YlfButton>
      <YlfButton :round="false">
        Standard radius
      </YlfButton>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <YlfButton :loading="loading" @click="fakeLoad">
        <template #icon>
          <div i-ri-magic-line />
        </template>
        {{ loading ? 'Loading…' : 'Try loading' }}
      </YlfButton>
    </div>
  </div>
</template>

Primary actions default to solid sky blue. Use accent with tone for brand emphasis; outline, soft and ghost styles support secondary actions. Success, warning and danger carry their semantic meanings.

Buttons and badges share green success, sun yellow warning and coral danger, with paired darker foreground tokens.

Brand entrance

Use variant="hero" size="xl" for a homepage or campaign's main entrance. It pairs a deep blue-to-cyan gradient with white text, a soft shadow and a 56px touch target. Both themes retain the deep ramp and white foreground; never substitute the brighter decorative sky gradient. Hover deepens the colors, focus adds a two-color ring, and reduced motion disables the lift.

Keep one hero action per section. Everyday save, confirm and navigation controls use primary or secondary variants. tone and appearance do not change the hero palette. The shared --ylf-hero-* tokens define its colors and shadows; applications may adapt their router behavior while reusing these tokens.

Registry

Copy Button and shared tokens into an application by URL through Registry distribution. Prefer @yunlefun/vue for centrally maintained foundations.

Emphasis

Accent/status variants accept appearance="solid", soft or outline, including the legacy aurora alias. Other variants retain their appearance. variant="soft" is brand blue; colored soft buttons use variant="accent" appearance="soft".

Props

Prop	Description	Type	Default
variant	Variant	primary | hero | accent | secondary | soft | ghost | success | warning | danger	primary
tone	Accent hue, only for accent	blue | sun | cyan | coral | pink | green	blue
appearance	Emphasis for accent and status variants	solid | soft | outline	solid
size	Size	sm | md | lg | xl	md
round	Pill radius	boolean	true
block	Full width	boolean	false
loading	Loading state	boolean	false
disabled	Disabled	boolean	false
tag	Rendered tag, such as 'a'	string	'button'

Accent tone defaults to blue. Other variants keep brand/status meanings. Legacy aurora aliases accent.

Slots

Name	Description
default	Button text
icon	Leading icon

Events

Name	Description
click	Click event, suppressed when disabled or loading