# w-button

# Playground

Sample button



      <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

# Graph


Built with StencilJS (opens new window)