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

Will render a button that, when clicked, will increment the count variable. If count is greater than or equal to 10, then the button is disabled.

Result

0

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

<template>
  <aeria-button
    :disabled="count >= 10"
    @click="count++"
  >
    Increment
  </aeria-button>
</template>

Props

• dummy boolean?: Don't capture click events.

• disabled boolean?: Disable click events.

• loading boolean?: Sets button to load state. While in this state, clicking is disabled.

• 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))