aeria-button

This component renders a styled button that will add style controls on top of aeria-bare-button functionalities. Buttons can have different sizes and variants and can also have loading and disabled states.

Example

Result

0

Result

0

<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <aeria-button @click="count++">
    Count: {{ count }}
  </aeria-button>

  <aeria-button variant="alt" @click="count = 0">
    Reset
  </aeria-button>
</template>

Props

• disabled boolean?: Whether or not clicking on the button is disabled.

• loading boolean?: Whether or not the button has a loading state.

• variant Size default: 'normal': The variant of button styling. Accepted variants are:

type Variant =
  | 'primary'
  | 'alt'
  | 'transparent'

• size Size default: 'medium': The size the button should have. Accepted sizes are:

type Size = 
  | 'small'
  | 'medium'
  | 'large'

• icon string?: The name of an icon from an icon library to be contained inside the button.
• small boolean?: Shorthand property for size: 'small'.
• large boolean?: Shorthand property for size: 'large'.

Slots

• default: Content to be displayed inside the button.

CSS overrides

• --button-border-color: color;: the color of the border of the button (default: var(--theme-border-color))