Button

Versatile button component with loading states, icons, and multiple variants.

Live Demo

With Icons

States

As a Link

Pass to and the button renders a real <a href>, so crawlers, middle-click and "open in new tab" work. Internal paths navigate through the Vue router when one is installed (always in Nuxt), without a page reload. External URLs, tel: / mailto: and #hash links are left to the browser. While disabled or loading it falls back to a <button>.

Internal link

Email us

<template>
  <orio-button to="/reserve">Book a table</orio-button>
  <orio-button to="tel:+31165564090" variant="secondary">Call us</orio-button>
</template>

Usage

Basic

<template>
  <orio-button @click="handleClick">
    Click Me
  </orio-button>
</template>

<script setup>
function handleClick() {
  console.log('Clicked!')
}
</script>

Button Variants

<orio-button variant="primary">Primary</orio-button>
<orio-button variant="secondary">Secondary</orio-button>
<orio-button variant="subdued">Subdued</orio-button>

With Icons

<!-- Icon before text -->
<orio-button icon="edit">Edit</orio-button>

<!-- Icon only (automatically rounds to circle) -->
<orio-button icon="plus" />

Loading State

<template>
  <orio-button :loading="isLoading" @click="save">
    Save Changes
  </orio-button>
</template>

<script setup>
const isLoading = ref(false)

async function save() {
  isLoading.value = true
  await api.save()
  isLoading.value = false
}
</script>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'subdued'	'primary'	Button visual style
icon	string	undefined	Icon name from icon registry
loading	boolean	false	Shows loading spinner, prevents clicks
disabled	boolean	false	Disables button interaction
to	RouteLocationRaw	undefined	Render as a real <a href> (router navigation for internal paths); ignored while disabled/loading

Note: The native HTML type attribute (e.g., type="submit") can be used normally via v-bind and will be passed through to the underlying <button> element.

Events

Event	Payload	Description
click	PointerEvent	Emitted on button click (when not loading/disabled)

Slots

Slot	Props	Description
default	-	Button text content
icon	-	Custom icon content

Styling

The button uses these CSS variables:

--color-accent       /* Primary button background */
--color-accent-ink   /* Text color on primary */
--color-accent-hover /* Hover state */
--color-accent-border