ss-web-elements-action-button

Stardust Scribbles - Action Button Web Component

Installation

npm i ss-web-elements-icon ss-web-elements-action-button

Properties

Property Name	Values	Type	Default	Optional	Description
icon	Google icon name, i.e. check	string	-	yes	icon: to be used as prefix of label. If label not provided then only icon will be shown
label		string	-	yes	To be used as the label of the action button
intent	primary, light, dark	string		yes	intent when selected
selected		boolean	false	yes	Whether button is selected or not
variant	outlined, minimal	string	outlined	yes	Variant of the action button
disabled		boolean	false	yes	Whether disabled or not
size	xs, sm, md, lg, xl	string	md	yes	Size of the action button
width	auto, full	string	auto

Note: Either icon or label are required.

CSS Tokens Used

Name	Value	Hex Value
--ss-action-button-enabled-outlined-border
--ss-action-button-enabled-outlined-hover-color-bg
--ss-action-button-disabled-outlined-border-color
--ss-action-button-enabled-selected-light-color-bg
--ss-action-button-enabled-selected-light-color-fg
--ss-action-button-enabled-selected-dark-color-bg
--ss-action-button-enabled-selected-dark-color-fg
--ss-action-button-enabled-selected-primary-color-bg
--ss-action-button-enabled-selected-primary-color-fg
--ss-action-button-enabled-selected-light-hover-color-bg
--ss-action-button-enabled-selected-dark-hover-color-bg
--ss-action-button-enabled-selected-primary-hover-color-bg
--ss-action-button-disabled-outlined-border
--ss-action-button-disabled-outlined-color-bg
--ss-action-button-disabled-outlined-color-fg
--ss-action-button-disabled-selected-light-color-bg
--ss-action-button-disabled-selected-light-color-fg
--ss-action-button-disabled-selected-dark-color-bg
--ss-action-button-disabled-selected-dark-color-fg
--ss-action-button-disabled-selected-primary-color-bg
--ss-action-button-disabled-selected-primary-color-fg
--ss-action-button-padding-xs
--ss-action-button-padding-sm
--ss-action-button-padding-md
--ss-action-button-padding-lg
--ss-action-button-padding-xl
--ss-action-button-typography-xs
--ss-action-button-typography-sm
--ss-action-button-typography-md
--ss-action-button-typography-lg
--ss-action-button-typography-xl
--ss-action-button-border-radius-xs
--ss-action-button-border-radius-sm
--ss-action-button-border-radius-md
--ss-action-button-border-radius-lg
--ss-action-button-border-radius-xl
--ss-action-button-border-top-left-radius
--ss-action-button-border-top-right-radius
--ss-action-button-border-bottom-left-radius
--ss-action-button-border-bottom-left-radius