Button

Emerald Button UI component.

Usage

npm install @stone-payments/emd-basic-button

import '@stone-payments/emd-basic-button';

<emd-button abc>
  Click me
</emd-button>

<emd-button abc size="large" rank="secondary">
  Click me
</emd-button>

<emd-button>
  Click me
</emd-button>

<emd-button>
  <emd-icon slot="icon" icon="arrow-up"></emd-icon>
  Move up
</emd-button>

<emd-button loading>
  Buy now
</emd-button>

<emd-button href="http://stone.co">
  Stone Co.
</emd-button>

Attributes and Properties

abc

Applies the ABC theme to the component. The ABC mode intentionally restricts the styles that can be applied to the component. Font size, color and background can only be changed through size and rank properties in ABC mode.

• Type: Boolean
• Attribute and property

size

Changes the size of the component when in ABC mode. It can be large, medium or small.

• Type: String
• Attribute and property

rank

Changes the appearance of the component when in ABC mode. It can be primary, secondary or tertiary.

• Type: String
• Attribute and property

type

Defines the type of the component. It can be: button, submit or reset. This attribute is passed to the <button> element inside the component.

• Type: String
• Attribute and property

disabled

Disables the component.

• Type: Boolean
• Attribute and property

loading

Shows a loading spinner inside the component.

• Type: Boolean
• Attribute and property

href

Makes the component behave like an <a> tag.

• Type: String
• Attribute and property

target

Defines the tab where the url set in the href attribute will be loaded.

• Type: String
• Attribute and property

multipleclicks

Allows the component to recognize multiple clicks in a row. By default, when clicked multiple times in a row, the component will only recognize the first click.

• Type: Boolean
• Attribute and property

CSS Properties

--emd-button-padding

Controlls the internal padding of the button. This property doesn't work in ABC mode.

• Default: 1.125em 1.5em

Slots

Default

The component's content. Usually some text, but it can also be an image or an icon, for example.

icon

The area on the left to the content where the optional icon goes.

Events

This component dispatches all native Button events, like click, for example.