Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Form
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Form

Button

The <salla-button> web component shows a customizable button, in terms of size, color, style, status, position etc ,which can be used with any other web component, and that can be customized using the properties' parameters available.

Example#

Button Example

Usage#

HTML
JS
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
ColorcolorCustomized Button color"danger" | "dark" | "gray" | "light" | "primary" | "success" | "warning"'primary'
DisableddisabledButton disability statusboolean'false'
FillfillButton fill style"none" | "outline" | "solid"'solid'
hrefhrefButton with a link capabilitystringundefined
Loader Positionloader-positionSet the loading animation's position"after" | "center" | "end" | "start"'after'
LoadingloadingActivate Button loadingboolean'false'
ShapeshapeButton type Configs"btn" | "icon" | "link"'btn'
SizesizeButton size Configs"small" | "medium" | "large"'medium'
WidthwidthButton extends the full available width"normal" | "wide"'normal'

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as enable and/or disable loading the component.
MethodDescriptionReturn Type
disable()Inactivates the button by adding disabled attribute. Visually, it becomes unclickable and unhoverable.Promise<void>
enable()Activates the button by removing disabled attribute.Promise<void>
load()Runs loading animation to notify a user that there is a processing taking place.Promise<HTMLElement>
stop()Stops loading animation after a process has completedPromise<HTMLElement>
setText(html: string)Customizes the button's body textPromise<HTMLElement>
Modified at 2024-08-18 09:20:48
Previous
Form
Next
Bottom Alert