Button
Buttons are a clickable element that allows you to display text, an icon, or both. Buttons can be easily customized using various attributes and CSS properties.
Basic usage
To use the Button component, include it in the HTML with the required attributes. Adding the disabled attribute makes the button inactive and unclickable.
Tooltip
The tooltip property allows you to display a text description of the button when the mouse is moved over it. To display the text, you need to add a tooltip attribute to the button with the text content.
By adding the tooltip-placement attribute it is possible to specify the position of the text display.
Toggle
The toggle property allows you to assign two different states to a button and toggle between them with a click. Setting the value assigns a default state to the button.
To set the available states, you need to add two child elements to the button with a toggle value slot and also with a state property, which determines the actual state value of the button.
Caret
The caret property allows you to display an arrow on the button. To display the arrow, you need to add the caret attribute to the button.
Button Shape
The round property allows you to adjust the shape of the button. By default, the buttons are rectangular with slightly rounded edges. Adding this attribute will increase the roundness of the button.
Form button
The submit and reset properties allow you to use the button to submit or reset the form. A button with the submit property sends the form that is linked to it. A button with the reset property will reset all form values.
Button Fill
The Fill property specifies the background and border fill of the button. By default, the buttons have a solid background. Other options are link and outline.
Button size
The size property specifies the size of the button. Setting this property will change the internal offset of the button.
Button icons
Icons can also be displayed in buttons by inserting the wje-icon element. You modify their location within the button using the slot attribute and the start or end property. If the button contains no text and consists of an icon only, use the icon-only property.
For more information about icons, see Icons.
Styling
Button colors
The color property adjusts the background and border color of the button. Setting this value will change the button color to one of the colors in the preset color palette. By default, the buttons have a primary background.
Button edge color
The color property can be combined with the fill property.
CSS Custom Properties
When to use
Use wje-button when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
disabled
| Description | Get disabled state of the Button element. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
color
| Description | Get color of the Button element. |
| Attribute | color |
| Type | string｜string |
| Default | - |
value
| Description | Sets the current value of the component. |
| Attribute | value |
| Type | any |
| Default | - |
active
| Description | Get active state of the Button element. |
| Attribute | active |
| Type | boolean |
| Default | - |
href
| Description | Sets the target URL used when the component acts as a link. |
| Attribute | href |
| Type | any |
| Default | - |
Events
| Name | Description |
|---|---|
wje-button:click | Emitted when the button is clicked. |
wje-button:toggle | Emitted when a toggle-style button changes its active state. |
wje-button:submit | Emitted when the button triggers form submission behavior. |
wje-button:reset | Emitted when the button triggers form reset behavior. |
Methods
formAssociatedCallback
| Description | Synchronizes the component with the form-associated custom element lifecycle when form context changes. |
| Signature | (form: HTMLFormElement) => void |
formDisabledCallback
| Description | Updates component disabled state when the owning form switches between enabled and disabled modes. |
| Signature | (disabled: boolean) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The component's native wrapper. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-button-background-color | Background color of the component;. |
--wje-button-border-color | Border color of the component;. |
--wje-button-color | Color of the component;. |
--wje-button-border-radius | Border radius of the component;. |
--wje-button-border-width | Border width of the component;. |
--wje-button-border-style | Border style of the component;. |
--wje-button-border-color | Border color of the component;. |
--wje-button-margin-inline | Margin inline of the component;. |
Slots
| Name | Description |
|---|---|
default | Default slot for the main component content. |
icon | Slot for icon content. |
caret | Slot for caret icon content. |
start | Slot for content shown before the main content. |
end | Slot for content shown after the main content. |
toggle | Slot for toggle control content. |