<le-button>

A component you'd expect to see in any UI library. No surprises here.

Usage

The <le-button> component is used to trigger an action or event. It can be used in various contexts, such as forms, dialogs, or anywhere you need a clickable element.

<le-button onclick="alert('Clicked!')">Click me</le-button>

The example uses the onclick attribute to handle the click event. But the button is acting correctly as a standard HTML button. It can submit forms, be focused, and interact with other HTML elements as expected.

Properties / Attributes

@variant

The @variant attribute allows you to change the visual style of the button. It accepts the following values:

• solid (default): The main call-to-action button style.
• outlined: A less prominent button style.
• clear: A button style with no background or border, often used for inline actions.

@color

The @color attribute is basically a semantic color token that you can use to indicate the purpose of the button. It accepts the following values:

• primary (default): The primary color of your theme.
• secondary: The secondary color of your theme.
• success: A color indicating a successful action.
• danger: A color indicating a destructive action.
• warning: A color indicating a warning or caution.
• info: A color for informational purposes.

@size

To manage the button's size, you have three options:

• small: A smaller button size.
• medium (default): The standard button size.
• large: A larger button size.

@full-width

The @full-width attribute makes the button take the full width of its container. This can be useful for buttons in forms or mobile layouts.

@selected

The @selected attribute indicates whether the button is in a selected state. It can be used to highlight the currently active button in a group of buttons.

Currently, the @selected attribute is working best when the @variant is set to outlined.

<le-button selected variant="outlined">Selected</le-button>
<le-button variant="outlined">Not Selected</le-button>

@disabled

The @disabled attribute disables the button, making it unclickable and visually indicating that it's not available for interaction.

@type

Default type attribute from HTML button element. Only change if you need your button to submit forms. Otherwise, leave it as the default.

@href (and @target)

If you want to use the button as a link, you can use the @href (together with @target) attribute just like in an anchor element. The button will be rendered as an anchor tag with the provided attributes, and it will have all the styles and behaviors of a button.

<le-button href="https://le-kit.dev" target="_blank">Go to Le-Kit website</le-button>

Properties or Slots

There are a couple of properties that can be set as a properties and as slots. This is important when you want to set another component inside the button, and here we're talking about icons. The thing is that when playing with frameworks sometimes it's easier to set them as properties, but when using the component in plain HTML, it's easier to set them as a slot. So you can choose the way that works best for you.

In plain HTML you can use emoji for example, as an icon, or any other HTML element.

icon-start

An icon at the beginning of the button.

<le-button icon-start="🏠">Home</le-button>
<le-button variant="outlined">
  <le-icon slot="icon-start" name="side-panel-start"></le-icon>
  Toggle the Side Panel
</le-button>

Note: in the example above is present <le-side-panel-toggle> component, to actually toggle the real panel. It is based on the <le-button>, so it is looking exactly as it should.

icon-end

An icon at the beginning of the button.

<le-button variant="clear" icon-end="🫆">Log In</le-button>
<le-button variant="outlined">
  Toggle the Side Panel
  <le-icon slot="icon-end" name="side-panel-end"></le-icon>
</le-button>

icon-only

If the button have to have only one icon inside, that is your parameter. If you have it, then the label will not show up

<le-button variant="outlined" icon-only="⚙️">Label Text</le-button>
<le-button variant="outlined">
  <le-icon slot="icon-only" name="hamburger"></le-icon>
  Label Text
</le-button>

Default Slot

As you can see from the examples above, everything that is not using one of the three icon slots is shown as a label of the button.

Events

Something that we're still experimenting with is the name of the events. Here in the <le-button> we are using the name that is matching the default DOM event — click. This is considered bad practice in many articles and the Stencil.js documentation itself. There's even a linter rule against it. But... this is the only way we can catch the event, not subscribing to it using JavaScript, the only way to do something with just the attribute. So... experiments will continue.

click

Fired when the user is clicking with the mouse or tapping with his finger on a touchscreen.

An example with the attribute onclick you can see at the top of this page. Here's how to subscribe via JavaScript:

const button = document.getElementById("le-button-click");
button.addEventListener("click", (event) => {
  alert(`Here’s the intercepted click: ${event.detail}`);
});