Skip to content
On this page


The Button component is used to trigger an action such as submitting a form, opening a Dialog, or canceling an action.


  <Button @click="alert('Hello')">Default</Button>
  <Button appearance="primary">Primary</Button>
  <Button appearance="danger">Danger</Button>
  <Button appearance="minimal">Minimal</Button>
  <Button icon="x" />
  <Button icon-left="menu">Menu</Button>
  <Button icon-right="external-link">Link</Button>
  <Button :loading="true">Submit</Button>

<script setup>
import { Button } from 'frappe-ui'


appearance'secondary'primary | secondary | danger | success | warning | white | minimal
disabledfalsetrue | false
activefalsetrue | falseOnly applicable if appearance is minimal
iconnullFeather Icon nameWill only display icon without label. If label is provided, aria-label will be set to that value.
iconLeftnullFeather Icon name
iconRightnullFeather Icon name
loadingfalsetrue | falseWill show a loading spinner to the left of the button text
loadingTextnullStringSet this to change the button text in loading state
routenullString | ObjectIf you are using vue-router, you can pass a valid route value and click handler will be added
linknullStringURL to open in a new window on button click


All attributes and event listeners are passed down to the underlying button element, so @click and other events will just work like on a normal button.