Button
Buttons represent actions that are available to the user.
Button( _.onClick --> Observer[dom.MouseEvent] { event => dom.window.alert(s"Clicked at clientX ${event.clientX}, clientY ${event.clientY}") })("Button")Examples
Variants
Use the variant attribute to set the button's semantic variant.
Button(_.variant.brand)("Brand")Button(_.variant.danger)("Danger")Button(_.variant.neutral)("Neutral")Button(_.variant.success)("Success")Button(_.variant.warning)("Warning")Appearance
Use the appearance attribute to change the button's visual appearance.
Button(_.appearance.accent, _.variant.neutral)("Accent")Button(_.appearance.filledOutlined, _.variant.neutral)("Filled + Outlined")Button(_.appearance.filled, _.variant.neutral)("Filled")Button(_.appearance.outlined, _.variant.neutral)("Outlined")Button(_.appearance := "plain", _.variant := "neutral")("Plain")Button(_.appearance.accent, _.variant.brand)("Accent")Button(_.appearance.filledOutlined, _.variant.brand)("Filled + Outlined")Button(_.appearance.filled, _.variant.brand)("Filled")Button(_.appearance.outlined, _.variant.brand)("Outlined")Button(_.appearance.plain, _.variant.brand)("Plain")Button(_.appearance.accent, _.variant.success)("Accent")Button(_.appearance.filledOutlined, _.variant.success)("Filled + Outlined")Button(_.appearance.filled, _.variant.success)("Filled")Button(_.appearance.outlined, _.variant.success)("Outlined")Button(_.appearance.plain, _.variant.success)("Plain")Button(_.appearance.accent, _.variant.warning)("Accent")Button(_.appearance.filledOutlined, _.variant.warning)("Filled + Outlined")Button(_.appearance.filled, _.variant.warning)("Filled")Button(_.appearance.outlined, _.variant.warning)("Outlined")Button(_.appearance.plain, _.variant.warning)("Plain")Button(_.appearance.accent, _.variant.danger)("Accent")Button(_.appearance.filledOutlined, _.variant.danger)("Filled + Outlined")Button(_.appearance.filled, _.variant.danger)("Filled")Button(_.appearance.outlined, _.variant.danger)("Outlined")Button(_.appearance.plain, _.variant.danger)("Plain")Sizes
Use the size attribute to change a button's size.
Button(_.size.small)("Small")Button(_.size.medium)("Medium")Button(_.size.large)("Large")Pill Buttons
Use the pill attribute to give buttons rounded edges.
Button(_.size.small, _.pill := true)("Small")Button(_.size.medium, _.pill := true)("Medium")Button(_.size.large, _.pill := true)("Large")Link Buttons
It's often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the rel, target, and download attributes.
Button(_.href := "https://example.com/")("Link")Button(_.href := "https://example.com/", _.target := "_blank")("Link with target")Button( _.href := "/assets/images/logo.svg", _.download := "shoelace.svg")("Download")Icon Buttons
When only an icon is slotted into the label slot, the button becomes an icon button. In this case, it's important to give the icon a label for users with assistive devices. Icon buttons can use any appearance or variant.
Button(_.appearance.accent, _.variant.neutral)( Icon(_.name := "house", _.label := "Home")())Button(_.appearance.filled, _.variant.neutral)( Icon(_.name := "house", _.label := "Home")())Button(_.appearance.outlined, _.variant.neutral)( Icon(_.name := "house", _.label := "Home")())Button(_.appearance.plain, _.variant.neutral)( Icon(_.name := "house", _.label := "Home")())Setting a Custom Width
As expected, buttons can be given a custom width by setting the width CSS property. This is useful for making buttons span the full width of their container on smaller screens.
Button(_.size.small)(width.percent(100), "Small")Button(_.size.medium)(width.percent(100), "Medium")Button(_.size.large)(width.percent(100), "Large")Start & End Decorations
Use the start and end slots to add presentational elements like <wa-icon> next to the button label.
Button( _.size.small, _.slots.start(Icon(_.name := "gear", _.label := "Settings")()))("Settings")Button( _.size.small, _.slots.end(Icon(_.name := "undo", _.label := "Refresh")()))("Refresh")Button( _.size.small, _.slots.start(Icon(_.name := "link", _.label := "Link")()), _.slots.end( Icon( _.name := "arrow-up-right-from-square", _.label := "Open in new tab" )() ))("Open")Button( _.size.medium, _.slots.start(Icon(_.name := "gear", _.label := "Settings")()))("Settings")Button( _.size.medium, _.slots.end(Icon(_.name := "undo", _.label := "Refresh")()))("Refresh")Button( _.size.medium, _.slots.start(Icon(_.name := "link", _.label := "Link")()), _.slots.end( Icon( _.name := "arrow-up-right-from-square", _.label := "Open in new tab" )() ))("Open")Button( _.size.large, _.slots.start(Icon(_.name := "gear", _.label := "Settings")()))("Settings")Button( _.size.large, _.slots.end(Icon(_.name := "undo", _.label := "Refresh")()))("Refresh")Button( _.size.large, _.slots.start(Icon(_.name := "link", _.label := "Link")()), _.slots.end( Icon( _.name := "arrow-up-right-from-square", _.label := "Open in new tab" )() ))("Open")Caret
Use the with-caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
Button(_.size.small, _.withCaret := true)("Small")Button(_.size.medium, _.withCaret := true)("Medium")Button(_.size.large, _.withCaret := true)("Large")Loading
Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
Button(_.variant.brand, _.loading := true)("Brand")Button(_.variant.danger, _.loading := true)("Danger")Button(_.variant.neutral, _.loading := true)("Neutral")Button(_.variant.success, _.loading := true)("Success")Button(_.variant.warning, _.loading := true)("Warning")Disabled
Use the disabled attribute to disable a button.
Button(_.variant.brand, _.disabled := true)("Brand")Button(_.variant.danger, _.disabled := true)("Danger")Button(_.variant.neutral, _.disabled := true)("Neutral")Button(_.variant.success, _.disabled := true)("Success")Button(_.variant.warning, _.disabled := true)("Warning")Styling Buttons
This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's variant attribute instead of a class (e.g. wa-button[variant="brand"]).
Button()(cls := "pink", "Pink Button")wa-button.pink::part(base) { border-radius: 6px; border: solid 2px; background: #ff1493; border-top-color: #ff7ac1; border-left-color: #ff7ac1; border-bottom-color: #ad005c; border-right-color: #ad005c; color: white; font-size: 1.125rem; box-shadow: 0 2px 10px #0002; transition: all var(--wa-transition-slow) var(--wa-transition-easing);}wa-button.pink::part(base):hover { transform: scale(1.05);}wa-button.pink::part(base):active { border-top-color: #ad005c; border-right-color: #ff7ac1; border-bottom-color: #ff7ac1; border-left-color: #ad005c; transform: translateY(1px);}wa-button.pink::part(base):focus-visible { outline: dashed 2px deeppink; outline-offset: 4px;}