github
DocsBlog
Chapters
fontcolor_theme
Desktop UI

Button

PreviewHTML
OverviewList

Default Button

Active Button

Textured button

Square button

add

Dropdown arrow_down

checkConfirmConfirmcheck

Dropdown items arrow_down

checkDisable all

API <dui-button>(source)

searchclear
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed) 
@Input() auto-focus?: boolean
Whether the button is focused on initial loading. 
@Input() disabled?: boolean
@Input() highlighted?: boolean
Whether the button is highlighted. 
@Input() icon?: string
The icon for this button. Either a icon name same as for dui-icon, or an image path. 
@Input() iconColor?: string
@Input() icon-right?: boolean
@Input() iconSize?: number
Change in the icon size. Should not be necessary usually. 
@Input() primary?: boolean
Whether the button is primary. 
@Input() showHotkey?: boolean
@Input() small?: boolean
Whether the button has no padding and smaller font size 
@Input() square?: boolean
@Input() submitForm?: FormComponent
The form to submit when this button is clicked. 
@Input() textured?: boolean
@Input() tight?: boolean
Whether the button has smaller padding. Better for button with icons. 
@Output() activeChange?: boolean
@Output() destroy?: void
@Output() showHotkeyChange?: boolean
hotKeySize: (hotkey: string) => number
iconOnly: Signal<boolean>
isDisabled: Signal<boolean>
registeredHotkey: WritableSignal<string>
activate(): void

API <dui-tab-button>(source)

searchclear
This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it.
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed). Use alternatively form API, e.g. <dui-tab-button [(ngModel)]="chosen" value="overview"></dui-tab-button> 
@Input() disabled?: boolean
@Input() required?: boolean
@Input() value?: any
@Output() disabledChange?: boolean
@Output() valueChange?: any
error: boolean
routerLinkActive: RouterLinkActive
valid: boolean
setValue(value: any): void

API [hotkey](source)

searchclear

Adds a hotkey to a button.

<dui-button hotkey="escape">Cancel</dui-button>
<dui-button hotkey="cmd+s">Save</dui-button>
Name
Description 
@Input() hotkey: string
@Output() destroy?: void
active: WritableSignal<boolean>
registeredHotkey: WritableSignal<string>
activate(): void

API [duiFileChooser](source)

searchclear
This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it.

Directive to open the native file chooser dialog. Can be used wth FormsModule (ngModel).

<dui-button duiFileChooser duiFileChooserChange="open($event)">Open File</dui-button>
Name
Description 
@Input() disabled?: boolean
@Input() duiFileDirectory?: boolean
@Input() duiFileMultiple?: boolean
@Input() required?: boolean
@Input() value?: File[]
@Output() disabledChange?: boolean
@Output() duiFileChooserChange?: File[]
@Output() valueChange?: File[]
error: boolean
valid: boolean
setValue(value?: File[]): void

API [duiFilePicker](source)

searchclear
This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it.

Directive to open the native file picker dialog and return the selected files as Uint8Array. Can be used wth FormsModule (ngModel).

<dui-button duiFilePicker duiFilePickerChange="open($event)">Open File</dui-button>
Name
Description 
@Input() disabled?: boolean
@Input() duiFileAutoOpen?: boolean
@Input() duiFileMultiple?: boolean
@Input() required?: boolean
@Input() value?: FilePickerItem[]
@Output() disabledChange?: boolean
@Output() duiFilePickerChange?: FilePickerItem[]
@Output() valueChange?: FilePickerItem[]
error: boolean
valid: boolean
setValue(value?: FilePickerItem[]): void

API [duiFileDrop](source)

searchclear
This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it.

Directive to allow dropping files into an area. Can be used wth FormsModule (ngModel).

<div duiFileDrop (duiFileDropChange)="onFilesDropped($event)">
    Drop files here
</div>
Name
Description 
@Input() disabled?: boolean
@Input() duiFileDropMultiple?: boolean
@Input() required?: boolean
@Input() value?: FilePickerItem[]
@Output() disabledChange?: boolean
@Output() duiFileDropChange?: FilePickerItem[]
@Output() valueChange?: FilePickerItem[]
error: boolean
i: WritableSignal<number>
valid: boolean
setValue(value?: FilePickerItem[]): void