Skip to main content
The AButtonNavigation component is an atom that provides navigation functionality with an icon button. It supports routing, back navigation, and custom click handlers.

​
Props

​
icon
string
default:"heroicons:arrow-left-16-solid"
Icon to display in the button. Supports any icon from the configured icon sets.
​
to
string
default:""
Route path to navigate to when clicked. Uses Vue Router’s push method.
​
hasBackAction
boolean
default:"false"
Whether to perform a back action and go to the previous route using router.back()
​
size
ButtonSize
default:"md"
Size of the button. Options: xs, sm, md, lg, xl

​
Events

​
on-click
() => void
Emitted when the button is clicked, regardless of whether the route is changed or not

​
Usage

​
Basic Navigation

<template>
  <AButtonNavigation 
    to="/dashboard" 
    @on-click="handleClick"
  />
</template>

<script setup>
function handleClick() {
  console.log('Navigation triggered')
}
</script>

​
Back Navigation

<template>
  <AButtonNavigation 
    :has-back-action="true"
    icon="heroicons:arrow-left-16-solid"
  />
</template>

​
Custom Icon

<template>
  <AButtonNavigation 
    icon="heroicons:home-20-solid"
    to="/home"
    size="lg"
  />
</template>

​
Click Handler Only

<template>
  <AButtonNavigation 
    icon="heroicons:menu-20-solid"
    @on-click="toggleSidebar"
  />
</template>

<script setup>
function toggleSidebar() {
  // Custom logic without navigation
}
</script>

​
Type Exports

The component exports the following type: 
export type ButtonSize = InstanceType<typeof UButton>['$props']['size']

​
Behavior

The click handler follows this priority:
  1. If to prop is provided, navigates to that route
  2. Else if hasBackAction is true, goes back to previous route
  3. Always emits on-click event regardless of navigation

​
Styling

The button is rendered with:
  • Variant: icon (no background by default)
  • Color: neutral
  • Icon size adapts to the size prop
Source: /home/daytona/workspace/source/app/components/a/button/a-button-navigation.vue:56

Build docs developers (and LLMs) love

Get started for freeTalk to us