Components
Button
Buttons represent actions that are available to the user.
Properties
ButtonL()("Button")Examples
Types
Use the style property to set the button's type.
ButtonL(style = _.Full())("Full") // Default valueButtonL(style = _.Minimal())("Minimal")ButtonL(style = _.Ghost())("Ghost")ButtonL(style = _.Text())("Text")Colors
Use the color property to set the button's color.
ButtonL(style = _.Full(color = _.Gray0))("Gray0") // Default valueButtonL(style = _.Full(color = _.Primary))("Primary")ButtonL(style = _.Full(color = _.Danger))("Danger")ButtonL(style = _.Full(color = _.Success))("Success")ButtonL(style = _.Full(color = _.Warning))("Warning")ButtonL(style = _.Full(color = _.Gray9))("Gray9")Icon Button
Use the icon attribute to add an icon to the button. When no label is provided, the icon will be rendered as a square shape.
ButtonL(style = _.Full(icon = _.Download))()Button with Icon and Label
Uses the icon attribute to add an icon to the button. The label is added as a child of the ButtonL component.
ButtonL( style = _.Full(icon = _.Cog))("Settings")ButtonL( style = _.Full(endIcon = _.OpenNewWindow))("Open New Window")Sizes
Use the height property to set the button's height. Default height is Fix32.
ButtonL(style = _.Full(height = _.Fix24))("Fix24")ButtonL(style = _.Full(height = _.Fix32))("Fix32") // Default valueButtonL(style = _.Full(height = _.Fix40))("Fix40")Pill
Use the isPill property to make the button a pill shape.
ButtonL(style = _.Full(isPill = true))("Submit")ButtonL(style = _.Full(isPill = true, icon = _.CommentLine))("5")ButtonL(style = _.Full(isPill = true, icon = _.Home))()Busy
Use the isBusy property to set the button's busy state.
ButtonL(style = _.Full(isBusy = Val(true)))("Button")Disabled
Use the isDisabled property to set the button's disabled state.
ButtonL(isDisabled = Val(true))("Button")