# w-button
# Playground
<w-button>Sample button</w-button>
# Variants
# default
<w-button>Sample Button</w-button>
# text
<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
# Graph
Built with StencilJS (opens new window)
â Getting started w-input-text â