w-button

Playground

Sample button

icon: accessibilityapiarrow-downarrow-leftarrow-rightblockchaincalendarcheckcheck-circlecheck-ringclockcloseclose-circlecommentdotsdownloadeyeeye-largegearhamburgerhamburger-closeinfoink-penkeyquestion-circlesearchshieldshopifytimes-circlewordpress outline text
color: bluewhiteyellowgray size: xssmbaselgxl href:

prepend-icon: accessibilityapiarrow-downarrow-leftarrow-rightblockchaincalendarcheckcheck-circlecheck-ringclockcloseclose-circlecommentdotsdownloadeyeeye-largegearhamburgerhamburger-closeinfoink-penkeyquestion-circlesearchshieldshopifytimes-circlewordpress append-icon: accessibilityapiarrow-downarrow-leftarrow-rightblockchaincalendarcheckcheck-circlecheck-ringclockcloseclose-circlecommentdotsdownloadeyeeye-largegearhamburgerhamburger-closeinfoink-penkeyquestion-circlesearchshieldshopifytimes-circlewordpress

loading disabled

      <w-button>Sample button</w-button>
    

Variants

default

Sample Button

<w-button>Sample Button</w-button>

text

Sample Button

<w-button text>Sample Button</w-button>

API

w-button

Properties

Property	Attribute	Description	Type	Default
appendIcon	append-icon	adds an icon with the corresponding name after button content	"shield" \| "comment" \| "eye" \| "close" \| "close-circle" \| "check-circle" \| "clock" \| "ink-pen" \| "times-circle" \| "arrow-down" \| "question-circle" \| "eye-large" \| "blockchain" \| "accessibility" \| "hamburger" \| "hamburger-close" \| "arrow-right" \| "dots" \| "check-ring" \| "check" \| "api" \| "shopify" \| "wordpress" \| "gear" \| "search" \| "calendar" \| "info" \| "arrow-left" \| "download" \| "key"	undefined
color	color	button color	"blue" \| "gray" \| "white" \| "yellow"	undefined
disabled	disabled	button html "disabled" attribute	boolean	false
href	href	opens an url on click (make button work as a link)	string	''
icon	icon	button html "type" attribute	"shield" \| "comment" \| "eye" \| "close" \| "close-circle" \| "check-circle" \| "clock" \| "ink-pen" \| "times-circle" \| "arrow-down" \| "question-circle" \| "eye-large" \| "blockchain" \| "accessibility" \| "hamburger" \| "hamburger-close" \| "arrow-right" \| "dots" \| "check-ring" \| "check" \| "api" \| "shopify" \| "wordpress" \| "gear" \| "search" \| "calendar" \| "info" \| "arrow-left" \| "download" \| "key"	undefined
loading	loading	show spinner	boolean	false
outline	outline	renders button as underlined text	boolean	false
prependIcon	prepend-icon	adds an icon with the corresponding name before button content	"shield" \| "comment" \| "eye" \| "close" \| "close-circle" \| "check-circle" \| "clock" \| "ink-pen" \| "times-circle" \| "arrow-down" \| "question-circle" \| "eye-large" \| "blockchain" \| "accessibility" \| "hamburger" \| "hamburger-close" \| "arrow-right" \| "dots" \| "check-ring" \| "check" \| "api" \| "shopify" \| "wordpress" \| "gear" \| "search" \| "calendar" \| "info" \| "arrow-left" \| "download" \| "key"	undefined
size	size	button text size	"base" \| "lg" \| "sm" \| "xl" \| "xs"	undefined
target	target	name of the browsing context, defaults to '_blank' (specify '_self' to open url in the same tab)	string	''
text	text	renders button as underlined text	boolean	false
type	type	button html "type" attribute	string	undefined
underlineNone	underline-none	underline decoration for text button	boolean	false

Dependencies

Depends on

• w-icon

Graph

---

Built with StencilJS (opens new window)