Button

shadow

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

This example focuses on visual tuning. It changes the appearance with CSS variables or custom styles without changing the HTML structure.

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

active

Description	Set active state of the Button element.
Attribute	active
Type	boolean
Default	false

caret

Description	Set variant of the Button element.
Attribute	caret
Type	boolean
Default	false

color

Description	Properties of the element Button.
Attribute	color
Type	string｜string
Default	default

customEvent

Description	Sets the text value stored in custom-event.
Attribute	custom-event
Type	string
Default	-

dialog

Description	Set variant of the Button element.
Attribute	dialog
Type	string｜object
Default	-

disabled

Description	Set disabled state of the Button element.
Attribute	disabled
Type	boolean
Default	false

fill

Description	Set fill of the Button element.
Attribute	fill
Type	string
Default	solid

href

Description	Sets the target URL used when the component acts as a link.
Attribute	href
Type	any
Default	-

outline

Description	Set outline state of the Button element.
Attribute	outline
Type	boolean
Default	false

round

Description	Sets the 'round' attribute on the element. If the value is true, the attribute is added; otherwise, it is removed from the element.
Attribute	round
Type	boolean
Default	false

stopPropagation

Description	Set stop propagation state of the Button element.
Attribute	stop-propagation
Type	boolean
Default	-

tooltip

Description	Set variant of the Button element.
Attribute	tooltip
Type	boolean
Default	false

value

Description	Sets the current value of the component.
Attribute	value
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.