Button

Display a short text to represent a status or a category.

Component typeNuxtUI/Button
Design SystemsUXD
Default
Action Button

action button of UXD design buttons should have an attribute square

Icon Button

variant should be icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

Config Settings

Enter text to change the text in the button.

Change the size of the Button. Affects to height and font-size, unit is px
default: 36

Change the visual style of the Button.
default: primary

Change the visual style of the Button.
text(uxd), contained(uxd)/solid(nuxtUi), outline(uxd,nuxtUi), soft(nuxtUi), ghost(nuxtUi), link(nuxtUi), icon(uxd)
default: solid

Show a loading icon and disable the Button. need to install @iconify-json/svg-spinners

Remove the padding of the Button. suitable for variant icon

Force the Button to have the same padding horizontally and vertically. suitable for variant Action Button

set the icon position. default: leading

Usage
Config