sling-web-component-button

Install

npm install sling-web-component-button

Tag

  <sling-button></sling-button>

Dependencies

• sling-web-framework
• sling-web-helpers

Attributes and properties

|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
|:--|:--|:--|:--:|:--|:--:|
|block|Boolean|false|:heavy_check_mark:|
|color|String|normal|:heavy_check_mark:|
|disabled|Boolean|false|:heavy_check_mark:|
|size|String|normal|:heavy_check_mark:|
|Layout|String|normal|:heavy_check_mark:|

Description

|Name|Description| |:---|:---| |block |A boolean value that assigns the width: 100% CSS property to button.| |color|A pre-configured value for styling of button, can be normal, primary, secondary, success, danger, warning, info, clear.| |disabled|Disables the button, preventing the user from clicking and changing their style to dimmed| |size|A pre-configured value for size of button, can be normal, small or big.| |layout|A pre-configured value for the button's layout, can be normal, outline or text.|

Events

• click

Description: The event is triggered when the button is clicked and passes this information to the parents.

Examples

All component examples can be emulated using the npm start sling-web-component-button command.

Usage

<sling-button color="primary">Text</sling-button>

<sling-button block size="big" color="warning">Text</sling-button>

<sling-button color="danger">Text</sling-button>