DotNaos UI

Button

Starts an action or submits a form.

Source code

Waiting for the preview before loading source files · 2 of 2

Properties

Public properties derived from the component’s TypeScript signature.

PropertyTypeDefault
accessibilityLabelOptional
string
controlsOptional
string
disabledOptional
boolean
false
expandedOptional
boolean
onPressOptional
(() => void)
pressedOptional
boolean
sizeOptional
"sm" | "md" | "lg"
"md"
titleOptional
string
typeOptional
"button" | "submit" | "reset"
"button"
radiusOptional
"theme" | "full"
iconOptional
"loading" | "type" | "download" | "list" | "rows" | "square" | "code" | "menu" | "search" | "circle" | "image" | "columns" | "activity" | "gauge" | "alert-circle" | "alert-triangle" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "audio-lines" | "bold" | "bolt" | "box" | "camera" | "check" | "check-circle" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-dot" | "clipboard" | "cloud-upload" | "code-block" | "component" | "copy" | "credit-card" | "crosshair" | "database" | "eraser" | "eye" | "eye-off" | "external-link" | "file-code" | "file-diff" | "file-key" | "file-plus" | "file-search" | "file-text" | "focus" | "folder" | "folder-kanban" | "folder-open" | "folder-plus" | "git-branch" | "git-commit" | "globe" | "globe-alt" | "grip-vertical" | "hand" | "highlighter" | "inbox" | "info" | "italic" | "layers" | "dashboard" | "list-end" | "corner-down-right" | "ellipsis" | "list-filter" | "list-tree" | "maximize" | "message-circle" | "message" | "message-plus" | "message-text" | "microphone" | "minimize" | "minus" | "pointer" | "package" | "palette" | "panel-bottom" | "panel-left-close" | "panel-left-open" | "panel-right" | "paperclip" | "pause" | "pause-circle" | "pen" | "pencil" | "pencil-line" | "plus" | "receipt" | "redo" | "refresh" | "remote-branch" | "git-pull-request" | "rocket" | "rotate-counter-clockwise" | "ruler" | "save" | "scan-search" | "scissors" | "send" | "settings" | "shapes" | "shield" | "shield-alert" | "shield-check" | "shopping-bag" | "sliders" | "sparkles" | "selection-box" | "step-forward" | "tag" | "terminal" | "tune" | "trash" | "undo" | "user" | "workflow" | "wrench" | "close" | "zoom-in" | "zoom-out"
iconAfterOptional
"loading" | "type" | "download" | "list" | "rows" | "square" | "code" | "menu" | "search" | "circle" | "image" | "columns" | "activity" | "gauge" | "alert-circle" | "alert-triangle" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "audio-lines" | "bold" | "bolt" | "box" | "camera" | "check" | "check-circle" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-dot" | "clipboard" | "cloud-upload" | "code-block" | "component" | "copy" | "credit-card" | "crosshair" | "database" | "eraser" | "eye" | "eye-off" | "external-link" | "file-code" | "file-diff" | "file-key" | "file-plus" | "file-search" | "file-text" | "focus" | "folder" | "folder-kanban" | "folder-open" | "folder-plus" | "git-branch" | "git-commit" | "globe" | "globe-alt" | "grip-vertical" | "hand" | "highlighter" | "inbox" | "info" | "italic" | "layers" | "dashboard" | "list-end" | "corner-down-right" | "ellipsis" | "list-filter" | "list-tree" | "maximize" | "message-circle" | "message" | "message-plus" | "message-text" | "microphone" | "minimize" | "minus" | "pointer" | "package" | "palette" | "panel-bottom" | "panel-left-close" | "panel-left-open" | "panel-right" | "paperclip" | "pause" | "pause-circle" | "pen" | "pencil" | "pencil-line" | "plus" | "receipt" | "redo" | "refresh" | "remote-branch" | "git-pull-request" | "rocket" | "rotate-counter-clockwise" | "ruler" | "save" | "scan-search" | "scissors" | "send" | "settings" | "shapes" | "shield" | "shield-alert" | "shield-check" | "shopping-bag" | "sliders" | "sparkles" | "selection-box" | "step-forward" | "tag" | "terminal" | "tune" | "trash" | "undo" | "user" | "workflow" | "wrench" | "close" | "zoom-in" | "zoom-out"
labelOptional
string
variantOptional
"icon" | "primary" | "secondary" | "ghost"
"secondary"