Button

Usage
A button is the most identifiable component for neumorphism designs. You can customise the use of a button in various ways.
<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>
Props
Name
Description
Type
Default
Nameactive
Description

Set active state for the button

Typeboolean
Defaultfalse
Nameblock
Description

Make button display: block

Typeboolean
Defaultfalse
Namebordered
Description

If prop exists, button will have an engraved-styled border

Typeboolean
Defaultfalse
Namecircle
Description

Make button circle shaped

Typeboolean
Defaultfalse
Namedisabled
Description

If true, the user cannot interact with the button.

Typeboolean
Defaultfalse
Namedownload
Description

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).

Typestring
Default
Nameflat
Description

Make button flat

Typeboolean
Defaultfalse
Namehref
Description

Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Typestring
Default
Nameicon
Description

Icon only button

Typeboolean
Defaultfalse
NameiconText
Description

If this button has both icon and text

Typeboolean
Defaultfalse
NamerayTracing
Description

Use mouse as the light source (ray-tracing)

Typeboolean
Defaultfalse
Namerel
Description

Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.

Typestring
Default
Nametarget
Description

Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".

Typestring
Default
Nametype
Description

The type of the button.

Type"button" | "reset" | "submit"
Default'button'
Events
Event
Description
Event detail
EventblurEvent
Description

Emitted when the button loses focus.

Event detailvoid
EventclickEvent
Description

Emitted when the button is clicked.

Event detailvoid
EventfocusEvent
Description

Emitted when the button has focus.

Event detailvoid

Comments

Leave your thoughts here and it becomes a GitHub issue! Thanks to the magic of Utterances