Button

Commonly used button component with pixel-style visual effects.

Name	Category	Description	Type	Default
`type`	Style	Button type	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`plain`	Style	Plain button	`boolean`	`false`
`round`	Style	Round button	`boolean`	`false`
`circle`	Style	Circle button	`boolean`	`false`
`dash`	Style	Dash border style	`boolean`	`false`
`ghost`	Style	Ghost button (no border/bg)	`boolean`	`false`
`link`	Style	Link button (underlined text style)	`boolean`	`false`
`block`	Style	Block button (full-width)	`boolean`	`false`
`responsive`	Style	Responsive button (viewport-adaptive sizing)	`boolean`	`false`
`size`	Size	Button size	`'large' \| 'default' \| 'small'`	`'default'`
`color`	Color	Custom button color (hex)	`string`	—
`loading`	State	Loading state	`boolean`	`false`
`disabled`	State	Disabled state	`boolean`	`false`
`autofocus`	Behavior	Auto focus	`boolean`	`false`
`native-type`	Behavior	Native type attribute	`'button' \| 'submit' \| 'reset'`	`'button'`
`use-throttle`	Behavior	Enable throttle	`boolean`	`false`
`throttle-duration`	Behavior	Throttle duration (ms)	`number`	`500`
`loading-icon`	Content	Custom loading icon	`string`	`'spinner'`
`icon`	Content	Icon name	`string`	—
`tag`	Content	Custom element tag	`string`	`'button'`
`aria-label`	Content	ARIA label for the button, for accessibility	`string`	—
`click`	Event	Triggered when button is clicked	`(event: MouseEvent) => void`	—
`default`	Slot	Button content		—
`loading`	Slot	Custom loading icon		—
`ref`	Expose	Button HTML element	`Ref<HTMLButtonElement>`	—
`size`	Expose	Button size	`ComputedRef<string>`	—
`type`	Expose	Button type	`ComputedRef<string>`	—
`disabled`	Expose	Disabled state	`ComputedRef<boolean>`	—

Basic Usage

Use type, plain, round and circle properties to define button styles.

<template>
  <div class="demo-button">
    <div class="row">
      <px-button>Default</px-button>
      <px-button type="primary">Primary</px-button>
      <px-button type="success">Success</px-button>
      <px-button type="info">Info</px-button>
      <px-button type="warning">Warning</px-button>
      <px-button type="danger">Danger</px-button>
    </div>
    <div class="row">
      <px-button plain>Plain</px-button>
      <px-button type="primary" plain>Primary</px-button>
      <px-button type="success" plain>Success</px-button>
      <px-button type="info" plain>Info</px-button>
      <px-button type="warning" plain>Warning</px-button>
      <px-button type="danger" plain>Danger</px-button>
    </div>
    <div class="row">
      <px-button round>Round</px-button>
      <px-button type="primary" round>Primary</px-button>
      <px-button type="success" round>Success</px-button>
      <px-button type="info" round>Info</px-button>
      <px-button type="warning" round>Warning</px-button>
      <px-button type="danger" round>Danger</px-button>
    </div>
    <div class="row">
      <px-button icon="search" circle />
      <px-button type="primary" icon="edit" circle />
      <px-button type="success" icon="check" circle />
      <px-button type="info" icon="message" circle />
      <px-button type="warning" icon="alert" circle />
      <px-button type="danger" icon="trash" circle />
    </div>
  </div>
</template>

<style scoped>
.demo-button {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: start;
  align-items: center;
  gap: 10px;
}
</style>

Disabled State

Use disabled property to disable the button.

<template>
  <div class="demo-button">
    <div class="row">
      <px-button>Default</px-button>
      <px-button type="primary">Primary</px-button>
      <px-button type="success">Success</px-button>
      <px-button type="info">Info</px-button>
      <px-button type="warning">Warning</px-button>
      <px-button type="danger">Danger</px-button>
    </div>
    <div class="row">
      <px-button disabled>Default</px-button>
      <px-button type="primary" disabled>Primary</px-button>
      <px-button type="success" disabled>Success</px-button>
      <px-button type="info" disabled>Info</px-button>
      <px-button type="warning" disabled>Warning</px-button>
      <px-button type="danger" disabled>Danger</px-button>
    </div>
  </div>
</template>

<style scoped>
.demo-button {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: start;
  align-items: center;
  gap: 12px;
}
</style>

Different Sizes

Use size property to set the button size.

<template>
  <div class="demo-size">
    <div class="row">
      <px-button size="large">Large</px-button>
      <px-button>Default</px-button>
      <px-button size="small">Small</px-button>
      <px-button size="large" round>Large</px-button>
      <px-button round>Default</px-button>
      <px-button size="small" round>Small</px-button>
    </div>
    <div class="row">
      <px-button size="large" icon="search" circle />
      <px-button icon="search" circle />
      <px-button size="small" icon="search" circle />
    </div>
  </div>
</template>

<style scoped>
.demo-size {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.row :deep(.px-button + .px-button) {
  margin-left: 0;
}
</style>

Icon Button

Use icon property to add an icon to the button.

<template>
  <div class="row">
    <px-button type="primary" icon="edit" />
    <px-button type="primary" icon="link" />
    <px-button type="primary" icon="trash" />
    <px-button type="primary" icon="search">Search</px-button>
    <px-button type="primary">
      Upload<px-icon icon="upload" style="margin-left: 8px" />
    </px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>

Dash Border

Use dash property to apply a dashed border style. The pixel clip-path border is replaced with a CSS dashed border for a hand-drawn/cutout feel.

<template>
  <div class="row">
    <px-button dash>Default</px-button>
    <px-button type="primary" dash>Primary</px-button>
    <px-button type="success" dash>Success</px-button>
    <px-button type="info" dash>Info</px-button>
    <px-button type="warning" dash>Warning</px-button>
    <px-button type="danger" dash>Danger</px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.row :deep(.px-button + .px-button) {
  margin-left: 0;
}
</style>

Ghost Button

Use ghost property to create a borderless, background-free button. Only the text is visible — a subtle fill appears on hover.

<template>
  <div class="row">
    <px-button ghost>Default</px-button>
    <px-button type="primary" ghost>Primary</px-button>
    <px-button type="success" ghost>Success</px-button>
    <px-button type="info" ghost>Info</px-button>
    <px-button type="warning" ghost>Warning</px-button>
    <px-button type="danger" ghost>Danger</px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.row :deep(.px-button + .px-button) {
  margin-left: 0;
}
</style>

Link Button

Use link property to create an underlined text button with no border, background, or shadow. Ideal for inline actions or hyperlink-style interactions.

<template>
  <div class="row">
    <px-button link>Default</px-button>
    <px-button type="primary" link>Primary</px-button>
    <px-button type="success" link>Success</px-button>
    <px-button type="info" link>Info</px-button>
    <px-button type="warning" link>Warning</px-button>
    <px-button type="danger" link>Danger</px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.row :deep(.px-button + .px-button) {
  margin-left: 0;
}
</style>

Block Button

Use block property to make the button expand to the full width of its parent container.

<template>
  <div class="column">
    <px-button block>Default Block</px-button>
    <px-button type="primary" block>Primary Block</px-button>
    <px-button type="success" block>Success Block</px-button>
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
</style>

Responsive Button

Use responsive property to make the button automatically adapt its size based on the viewport width.

Breakpoint	Width	Height	Font Size
Base	< 640px	24px	extra-small
sm	≥ 640px	28px	small
md	≥ 768px	36px	base
lg	≥ 1024px	44px	large
xl	≥ 1280px	44px	large (wider padding)

<template>
  <div class="row">
    <px-button responsive>Responsive</px-button>
    <px-button type="primary" responsive>Primary</px-button>
    <px-button type="success" responsive>Success</px-button>
  </div>
  <p class="hint">↔ Resize your browser window to see the button adapt.</p>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.row :deep(.px-button + .px-button) {
  margin-left: 0;
}
.hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--px-text-color-secondary);
}
</style>

Loading State

Use loading property to set the button's loading state.

<template>
  <div class="row">
    <px-button type="primary" loading>Loading</px-button>
    <px-button type="primary" loading-icon="loader" loading
      >Loading</px-button
    >
    <px-button type="primary" loading>
      <template #loading>
        <px-icon style="margin-right: 6px" icon="bookmark" spin />
      </template>
      Loading
    </px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>

Button Group

Use <px-button-group> component to group multiple buttons.

<template>
  <div class="demo-button">
    <div class="row">
      <px-button-group disabled>
        <px-button type="primary" icon="arrow-left">Previous Page</px-button>
        <px-button type="primary">
          Next Page<px-icon icon="arrow-right" style="margin-left: 8px" />
        </px-button>
      </px-button-group>
    </div>
    <div class="row">
      <px-button-group type="warning" size="small">
        <px-button type="primary" icon="edit" round />
        <px-button type="primary" icon="link" />
        <px-button type="primary" icon="trash" round />
      </px-button-group>
    </div>
  </div>
</template>

<style scoped>
.demo-button {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>

Custom Color

Use color property to set a custom button color. The text color, hover state, active state, and disabled state are auto-generated from the provided color.

<template>
  <div class="demo-button">
    <div class="row">
      <px-button color="#626aef">Indigo</px-button>
      <px-button color="#ff6b9d">Pink</px-button>
      <px-button color="#36cfc9">Teal</px-button>
      <px-button color="#fac858">Gold</px-button>
      <px-button color="#ee6666">Coral</px-button>
      <px-button color="#3ba272">Emerald</px-button>
    </div>
    <div class="row">
      <px-button color="#626aef" plain>Indigo</px-button>
      <px-button color="#ff6b9d" plain>Pink</px-button>
      <px-button color="#36cfc9" plain>Teal</px-button>
      <px-button color="#fac858" plain>Gold</px-button>
      <px-button color="#ee6666" plain>Coral</px-button>
      <px-button color="#3ba272" plain>Emerald</px-button>
    </div>
    <div class="row">
      <px-button color="#626aef" disabled>Indigo</px-button>
      <px-button color="#ff6b9d" disabled>Pink</px-button>
      <px-button color="#36cfc9" disabled>Teal</px-button>
      <px-button color="#fac858" disabled>Gold</px-button>
      <px-button color="#ee6666" disabled>Coral</px-button>
      <px-button color="#3ba272" disabled>Emerald</px-button>
    </div>
    <div class="row">
      <px-button color="#626aef" icon="edit" circle />
      <px-button color="#ff6b9d" icon="heart" circle />
      <px-button color="#36cfc9" icon="check" circle />
      <px-button color="#fac858" icon="bookmark" circle />
      <px-button color="#ee6666" icon="trash" circle />
      <px-button color="#3ba272" icon="link" circle />
    </div>
  </div>
</template>

<style scoped>
.demo-button {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: start;
  align-items: center;
  gap: 12px;
}
</style>

Combine icon and color props to create social login buttons. All 486 pixelarticons are bundled — icons like github and mail work out of the box.

<template>
  <div class="login-demo">
    <px-button icon="mail" color="#000000">Login with Email</px-button>
    <px-button icon="github" color="#24292f">Login with GitHub</px-button>
  </div>
</template>

<style scoped>
.login-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
.login-demo :deep(.px-button) {
  width: 100%;
  justify-content: center;
}
.login-demo :deep(.px-button + .px-button) {
  margin-left: 0;
}
</style>

Pixel 3D Effect

Buttons feature an automatic bevel highlight — a bright inset on the top-left and a dark inset on the bottom-right — creating a raised pixel surface inspired by classic RPG UI and Windows 95. The bevel inverts on :active for a pressed-in feel. Flat variants (ghost, link, dash) and disabled buttons have no bevel.

Custom Tag

Use tag property to customize the button's HTML tag.

<template>
  <div class="row">
    <px-button>button</px-button>
    <px-button tag="div" role="button" tabindex="0">div</px-button>
    <px-button
      type="primary"
      tag="a"
      href="https://github.com/SaKaNa-Y/sakana-element"
      target="_blank"
      rel="noopener noreferrer"
    >
      a
    </px-button>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style>

Throttle Mode

Use use-throttle and throttle-duration properties to enable throttle mode.

<script setup>
function handleBtnClick() {}
</script>

<template>
  <div class="row">
    <px-button @click="handleBtnClick">with throttle</px-button>
    <px-button :use-throttle="false" @click="handleBtnClick"
      >without throttle</px-button
    >
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>

Button ​

Basic Usage ​

Disabled State ​

Different Sizes ​

Icon Button ​

Dash Border ​

Ghost Button ​

Link Button ​

Block Button ​

Responsive Button ​

Loading State ​

Button Group ​

Custom Color ​

Login Button ​

Pixel 3D Effect ​

Custom Tag ​

Throttle Mode ​