elements
Create a button with icon or link capabilities.
Use the default slot to set the text of the Button.
<UButton>Button</UButton>You can also use the label prop.
<UButton label="Button" />Use the color and variant props to change the visual style of the Button.
<UButton color="primary" variant="solid" />Besides all the colors from the ui.colors object, you can also use the white, gray and black colors with their pre-defined variants.
<UButton color="white" variant="solid" /><UButton color="gray" variant="solid" /><UButton color="black" variant="solid" />Use the size prop to change the size of the Button.
<UButton size="sm" />Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.
Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.
<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" variant="solid" label="Button" :trailing="false" />The label as prop or slot is optional so you can use the Button as an icon-only button.
<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" />Use the disabled prop to disable the Button.
<UButton disabled />Use the loading prop to show a loading icon and disable the Button.
Use the loading-icon prop to set a different icon or change it globally in ui.button.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.
<UButton loading />Use the block prop to make the Button fill the width of its container.
<UButton block />Use the to prop to make the Button a link.
Use the padded prop to remove the padding of the Button.
<UButton :padded="false" />Use the square prop to force the Button to have the same padding horizontally and vertically.
<UButton square />Use the truncate prop to truncate the label of the Button.
<UButton truncate class="w-20" label="Button with a long text" />To stack buttons as a group, use the ButtonGroup component.
size propui.buttonGroup.rounded or ui.buttonGroup.shadow<UButtonGroup size="sm">
<UButton label="Action" color="white" />
<UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
</UButtonGroup>| Prop | Default | Description |
|---|---|---|
size | appConfig.ui.button.default.size | string |
type | "button" | string |
color | appConfig.ui.button.default.color | string |
variant | appConfig.ui.button.default.variant | string |
label | null | string |
target | null | string |
icon | null | string |
loadingIcon | appConfig.ui.button.default.loadingIcon | string |
leadingIcon | null | string |
trailingIcon | null | string |
ariaLabel | null | string |
block | false | boolean |
loading | false | boolean |
disabled | false | boolean |
padded | true | boolean |
trailing | false | boolean |
leading | false | boolean |
square | false | boolean |
truncate | false | boolean |
ui | appConfig.ui.button | any |
to | null | any |
{
"base": "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0",
"font": "font-medium",
"rounded": "rounded-md",
"size": {
"2xs": "text-xs",
"xs": "text-xs",
"sm": "text-sm",
"md": "text-sm",
"lg": "text-base",
"xl": "text-base"
},
"gap": {
"2xs": "gap-x-1",
"xs": "gap-x-1.5",
"sm": "gap-x-2",
"md": "gap-x-2",
"lg": "gap-x-2",
"xl": "gap-x-2"
},
"padding": {
"2xs": "px-2 py-1",
"xs": "px-2.5 py-1.5",
"sm": "px-3 py-1.5",
"md": "px-3 py-2",
"lg": "px-4 py-2",
"xl": "px-4 py-3"
},
"square": {
"2xs": "p-1",
"xs": "p-1.5",
"sm": "p-1.5",
"md": "p-2",
"lg": "p-2",
"xl": "p-3"
},
"color": {
"white": {
"solid": "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
"ghost": "text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400"
},
"gray": {
"solid": "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
"ghost": "text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
"link": "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400"
},
"black": {
"solid": "shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
"link": "text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400"
}
},
"variant": {
"solid": "shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400",
"outline": "ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 dark:hover:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
"soft": "text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 dark:bg-{color}-950 dark:hover:bg-{color}-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
"ghost": "text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 dark:hover:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
"link": "text-{color}-500 hover:text-{color}-600 dark:text-{color}-400 dark:hover:text-{color}-500 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400"
},
"icon": {
"base": "flex-shrink-0",
"size": {
"2xs": "h-3.5 w-3.5",
"xs": "h-4 w-4",
"sm": "h-4 w-4",
"md": "h-5 w-5",
"lg": "h-5 w-5",
"xl": "h-6 w-6"
}
},
"default": {
"size": "sm",
"variant": "solid",
"color": "primary",
"loadingIcon": "i-heroicons-arrow-path-20-solid"
}
}