Button
<sc-button aria-label="Default button" onclick="alert('yo')">Button</sc-button>
You can use it the same way as an <a>
tag.
<!-- Anchor -->
<sc-button aria-label="Anchor tag" href="/" target="_blank" rel="noreferrer" title="button">
Anchor
</sc-button>
Add a block
attribute to create a block level button.
<!-- Block level -->
<sc-button aria-label="Block level button" block>Block Button</sc-button>
Use icon
attribute to adjust styles to fit an icon into the button.
<sc-button aria-label="Icon button" icon>
<i class='bx bx-drink'></i>
</sc-button>
Use icon-text
attribute to center align icon and text.
<sc-button aria-label="Icon and text button" icon-text>
<i class='bx bx-drink'></i>
Text
</sc-button>
<sc-button aria-label="Icon and text button" icon-text>
Text
<i class='bx bx-drink'></i>
</sc-button>
Use bordered
attribute to add a reflective border
<sc-button aria-label="Icon button with a reflective border" bordered icon>
<i class='bx bx-drink'></i>
</sc-button>
Use circle
attribute to create a circle shaped button
<sc-button aria-label="Circled button with image" circle>
<img src="https://github.com/seanwuapps.png" alt="avatar" width="100%">
</sc-button>
Use flat
attribute to make button blend in with the surface (not a11y friendly)
<sc-button aria-label="Flat button" flat>
Flat button
</sc-button>
Use
disabled
attribute to disable the button like you're used to.
<sc-button aria-label="Disabled button" disabled>
Disabled button
</sc-button>
Combine attributes together to have a party
<h6>Circle icon</h6>
<sc-button aria-label="Circle icon" icon circle>
<i class='bx bx-drink'></i>
</sc-button>
<h6>Circle bordered</h6>
<sc-button aria-label="Circle bordered" circle bordered>
<img src="https://github.com/seanwuapps.png" alt="avatar" width="100%">
</sc-button>
You can add ray-tracing
attribute to make it use the mouse as the light source, this could be used to draw more attention to the element.
<sc-button ray-tracing>
Look at me!
</sc-button>
Set active state for the button
boolean
false
Make button display: block
boolean
false
If prop exists, button will have an engraved-styled border
boolean
false
Make button circle shaped
boolean
false
If true
, the user cannot interact with the button.
boolean
false
This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
string
Make button flat
boolean
false
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
string
Icon only button
boolean
false
If this button has both icon and text
boolean
false
Use mouse as the light source (ray-tracing)
boolean
false
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
string
Specifies where to display the linked URL.
Only applies when an href
is provided.
Special keywords:
"_blank"
, "_self"
, "_parent"
,
"_top"
.
string
The type of the button.
"button" | "reset" | "submit"
'button'
Emitted when the button loses focus.
void
Emitted when the button is clicked.
void
Emitted when the button has focus.
void
Comments
Leave your thoughts here and it becomes a GitHub issue! Thanks to the magic of Utterances