Note
This documentation describes the Button Vue component for native UI views for Xml templates see button.
The primary interactive element. Renders a styled button supporting labels, icons, variants, badges, and loading state. Wraps PrimeVue Button.
Import
import { Button } from '@neos/design-system'
Props
| Prop |
Type |
Default |
Description |
label |
string \| number |
undefined |
Button label text |
icon |
string |
undefined |
Icon name (resolved via Image) |
iconSize |
Size |
undefined |
Override icon size (falls back to size) |
variant |
'default' \| 'positive' \| 'primary' \| 'danger' \| 'ghost' \| 'ghost-positive' \| 'ghost-primary' \| 'ghost-danger' \| 'link' \| 'unstyled' |
'default' |
Visual style variant |
size |
'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge' |
'medium' |
Button size |
disabled |
boolean |
false |
Disables the button |
loading |
boolean |
false |
Shows a loading spinner and disables click |
badge |
string \| number |
undefined |
Badge value shown on the button |
badgeSeverity |
'none' \| 'info' \| 'positive' \| 'warning' \| 'danger' |
'none' |
Badge color severity |
tooltip |
string |
undefined |
Native title tooltip |
type |
'button' \| 'submit' \| 'reset' |
'button' |
HTML button type |
contentAlign |
'start' \| 'center' \| 'end' |
'start' |
Justification of button content |
direction |
'horizontal' \| 'vertical' |
'horizontal' |
Content layout direction (icon + label) |
animated |
boolean |
false |
Enable theme animations |
focused |
boolean |
undefined |
Programmatically focus the button (v-model capable) |
Emits
| Event |
Payload |
Description |
update:focused |
boolean |
Emitted when focus state changes |
Slots
| Slot |
Description |
default |
Custom content inside the button |
Usage Examples
Label only
<button label="Save" variant="primary" />
Icon only
<button icon="add" size="small" tooltip="Add new item" />
Icon with label
<button icon="download" label="Export" variant="ghost" />
Loading state
<button label="Saving…" :loading="isSaving" variant="primary" />
Danger confirmation
<button label="Delete" variant="danger" icon="delete" @click="confirmDelete" />
With badge
<button label="Notifications" icon="bell" :badge="unreadCount" badge-severity="danger" />
Disabled
<button label="Submit" variant="primary" :disabled="!isFormValid" />