# Button The Button component is used to trigger an action such as submitting a form, opening a Dialog, or canceling an action. ## Usage Default Primary Danger Minimal Menu Link Submit ```vue ``` ## Props | Name | Default | Value | Description | | :------------ | :------------ | :------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | | `label` | `null` | `String` | | | `appearance` | `'secondary'` | `primary \| secondary \| danger \| success \| warning \| white \| minimal` | | | `disabled` | `false` | `true \| false` | | | `active` | `false` | `true \| false` | Only applicable if `appearance` is `minimal` | | `icon` | `null` | [Feather Icon](/components/feathericon) name | Will only display icon without label. If `label` is provided, `aria-label` will be set to that value. | | `iconLeft` | `null` | [Feather Icon](/components/feathericon) name | | | `iconRight` | `null` | [Feather Icon](/components/feathericon) name | | | `loading` | `false` | `true \| false` | Will show a loading spinner to the left of the button text | | `loadingText` | `null` | `String` | Set this to change the button text in `loading` state | | `route` | `null` | `String \| Object` | If you are using `vue-router`, you can pass a valid `route` value and click handler will be added | | `link` | `null` | `String` | URL to open in a new window on button click | ## Events 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.