The variant prop accepts the standard variants and dictates the button styles. The variants are: primary, secondary, default, plain, info, success, warning, and danger. The default value is primary. The variants are shown here using the hover and pressed effects.
Default
Primary
Secondary
Plain
Info
Success
Warning
Danger
<scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";import{variants}from"@/util/variants-util";import{capitalizeFirst}from"@/util/util";</script><template><divclass="grid grid-cols-3 md:grid-cols-4 gap-x-4 gap-y-8"><Examplev-for="variant in variants":label="capitalizeFirst(variant)"><AisButton:variant="variant"hoverfastpress>
Button
</AisButton></Example></div></template>
The outline prop can be combined with variant to provide an alternate set of button styles. outline is a boolean prop that can be added without a value. outline variants use a lighter background with a visible border.
Default
Primary
Secondary
Plain
Info
Success
Warning
Danger
<scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";import{variants}from"@/util/variants-util";import{capitalizeFirst}from"@/util/util";</script><template><divclass="grid grid-cols-3 md:grid-cols-4 gap-x-4 gap-y-8"><Examplev-for="variant in variants":label="capitalizeFirst(variant)"><AisButton:variant="variant"outlinehoverfastpress>
Outline
</AisButton></Example></div></template>
Thesize prop controls the button size. The accepted values are: xs, sm, md, lg, xl, and xxl. The default value is md and size xl matches UIDS SiteNow buttons. Forms should use md, lg, or xl leaving the extremes for more specialized interfaces. Buttons smaller than md should not use the font caps.
The font prop sets the button's font. It will accept one of our three brand fonts: caps, serif, and sans. caps is the default value. (Link to Typography page.)
Featured, stand-alone buttons such as form controls and calls to action should use caps. Buttons displayed in groups or at smaller sizes should consider sans.
The optional icon prop accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core components. Specifying a value will cause an icon to be displayed alongside the button's text. icon controls the standard location for button icons and should generally be preferred over iconRight.
arrow
asterisk
busy
new
edit
confirm
cancel
save
copy
delete
close
undo
redo
search
filter
info
success
required
error
warning
danger
unknown
person
user
users
group
menu
options
calendar
clock
money
heart
star
locked
unlocked
upload
download
left
right
up
down
first
last
caret-left
caret-right
caret-up
caret-down
file
file-pdf
file-csv
file-excel
file-word
file-powerpoint
file-image
file-video
file-upload
default
primary
secondary
bold
italic
strikethrough
list
list-ol
subscript
superscript
<template><divclass="grid grid-cols-4 gap-8"><Examplev-for="icon in coreIconKeys":label="icon"><AisButtonvariant="secondary":icon="icon"fasthoverpress>
{{label(icon)}}
</AisButton></Example></div></template><scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";import{ coreIconKeys }from"@/components/icon/ais-icons";constlabel=(icon)=>!icon.startsWith('caret-')? icon : icon.replace('caret-','')</script>
The optional iconRight prop accepts the same values as icon and will display an icon to the right of the button's text. iconRight is considered a building block for other components. Application developers should prefer the standard icon prop in most cases.
Arrow
<template><divclass="flex items-end justify-around"><Examplelabel="Arrow"><AisButtonvariant="secondary"iconRight="down">Menu</AisButton></Example></div></template><scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";</script>
Use the busy prop to indicate that the button is busy. When the component is busy, it will not accept additional clicks. This is commonly used when @click triggers an asynchronous action and must await a response.
Click to activate the busy state.
<scriptsetup>import AisButton from'@c/button/AisButton.vue'import Example from"@/components/docs/ComponentExample.vue"import{ref}from'vue'const busy =ref(false)consthandleClick=()=>{
console.log('AisButton Clicked!')
busy.value =truesetTimeout(()=> busy.value =false,3000)}</script><template><divclass="flex items-end justify-around"><Examplelabel="Click to activate the busy state."><AisButton@click="handleClick"icon="save":busy="busy"press>
Save
</AisButton></Example></div></template>
The arrow prop is a boolean flag that activates an arrow icon to the right of the button text. This is a form promoted by UIDS for call-to-action buttons.
Arrow
<template><divclass="flex items-end justify-around"><Examplelabel="Arrow"><AisButtonvariant="secondary"arrow>Apply Now</AisButton></Example></div></template><scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";</script>
AisButton accepts a number of boolean props that will enable interactive effects on the button. hover matches the UIDS hover animation. hover fast provides a faster version. press provides a click animation.
The block prop makes the button span the full width if its parent. block is a boolean prop that can be added without a value. The default value is false.
The rounded prop controls the border radius of the button. The accepted values are: true, false, md, lg, and full. The default value is false.
UIDS uses non-rounded buttons. For brand consistency, this form should be preferred for featured, stand-alone buttons such as form controls and calls to action. Developers can play with rounded corners for secondary controls and buttons that need to fade into the background more.
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
<template><divclass="grid gap-y-8"><divclass="grid grid-cols-4 gap-4"><Examplelabel="rounded-sm"><AisButtonrounded="sm"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded"><AisButtonroundedvariant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-md"><AisButtonrounded="md"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-lg"><AisButtonrounded="lg"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-xl"><AisButtonrounded="xl"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-2xl"><AisButtonrounded="2xl"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-3xl"><AisButtonrounded="3xl"variant="secondary"outline>Button</AisButton></Example><Examplelabel="rounded-full"><AisButtonrounded="full"variant="secondary"outline>Button</AisButton></Example></div></div></template><scriptsetup>import AisButton from'@/components/button/AisButton.vue';import Example from"@/components/docs/ComponentExample.vue";</script>
keepFocus is a boolean prop. When it is true, the button will keep focus after a click instead of calling blur(). When true, the button will have a focus ring after a click. This allows keyboard users to click multiple times. See the @click example to see it in action.
AisButton exposes a focus() method to programmatically focus the button element. The method can be invoked through a template ref specified on an AisButton component.