Components
Button
Buttons represent actions that are available to the user.
Properties
ButtonA()("Button")Examples
Appearance
Use the appearance attribute to change the button's visual appearance. Default appearance is accent.
ButtonA(_.appearance.accent)("Accent") // DefaultButtonA(_.appearance.filledOutlined)("Filled + Outlined")ButtonA(_.appearance.filled)("Filled")ButtonA(_.appearance.outlined)("Outlined")ButtonA(_.appearance.plain)("Plain")Variants
Use the variant attribute to set the button's semantic variant. Default variant is neutral.
ButtonA(_.variant.brand)("Brand")ButtonA(_.variant.danger)("Danger")ButtonA(_.variant.neutral)("Neutral") // DefaultButtonA(_.variant.success)("Success")ButtonA(_.variant.warning)("Warning")Icon Button
Use the IconA component as a single child of the ButtonA component to create an icon button which has a square shape.
ButtonA()( IconA(_.name.Download)())Button with Icon and Label
Uses the start and end slots to add an icon. The label is added as a child of the ButtonA component.
ButtonA( _.slots.start( IconA(_.name.Cog)() ))("Settings")ButtonA( _.slots.end( IconA(_.name.OpenNewWindow)() ))("Open New Window")Sizes
Use the size attribute to set the button's size. Default size is medium.
ButtonA(_.size.small)("Small")ButtonA(_.size.medium)("Medium") // DefaultButtonA(_.size.large)("Large")Pill
Use the isPill property to make the button a pill shape.
ButtonA(_.pill := true)("Submit")ButtonA(_.pill := true, _.slots.start(IconA(_.name.CommentLine)()))("5")ButtonA(_.pill := true)(IconA(_.name.Home)())Busy
Use the loading attribute to set the button's loading state.
ButtonA(_.loading := true)("Button")Disabled
Use the disabled attribute to set the button's disabled state.
ButtonA(_.disabled := true)("Button")