Skip to main content

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.

The shape of the button

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 filling

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

Editing styles

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

Attributes and Properties

active

DescriptionIf true, a check icon will appear in the button
Attributeactive
Typeboolean
Default'false'

caret

DescriptionIf true, a space for the caret icon appears in the button
Attributecaret
Typeboolean
Default'false'

color

DescriptionThe color to be used from the application color palette. The default options are "primary", "warning", "success", "warning", "warning", and "neutral". For more information about colors, visit Customization Basics.
Attributecolor
Type"danger." | "primary" | "success" | "neutral" | "complete" | "warning" | string | undefined
Defaultundefined

dialog

DescriptionAssociates a button with a specific event. When the button is clicked, the named event is triggered, allowing you to implement actions such as opening a dialog box or executing a custom event. See the dialog component for more information.
Attributedialog
Typestring
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the button.
Attributedisabled
Typeboolean
Defaultfalse

fill

DescriptionSet to "link" for a transparent button without borders, to "outline" for a transparent button with border, or to "solid" with filled background. The default fill is "solid".
Attributefill
Type"link" | "default" | "outline" | "solid" | undefined
Defaultundefined

size

DescriptionSet to "small" for a button with a smaller height and padding, or to "large" for a button with a larger height and padding. By default, the size is set to the default.
Attributesize
Type"default" | "large" | "small" | undefined
Defaultundefined

toggle

DescriptionAllows you to assign two different states to a button and toggle between them by clicking. Setting a value assigns a default state to the button. The child element must contain a slot with the value toggle and also a state property with one of the two available state values.
Attributetoggle
Typeany
Defaultfalse

tooltip

DescriptionAllows you to add text that will be displayed when the mouse hovers over the button.
Attributetooltip
Typeany
Defaultfalse

tooltip-placement

DescriptionSpecifies the position of the text in the "tooltip" attribute. The default position is "top"
Attributetooltip-placement
Typeany
Defaulttop

Events

NameDescription
wje-button:clickThe wje-button:click event is fired when the button is clicked.
wje-button:resetThe wje-button:reset event is fired when a button of type 'reset' is clicked when the associated form is reset.
wje-button:submitThe wje-button:submit event is fired when a button of type 'submit' is clicked when a form submission is triggered.
wje-button:toggleThe wje-button:toggle event is fired when the button with the 'toggle' slot is clicked, when switching state.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeRefers to the <a> element inside the button

CSS Custom Properties

NameDescription
--wje-button-background-colorButton background colour
--wj-button-border-colorButton edge colour
--wj-button-border-radiusRounding the edges of the button
--wj-button-border-styleButton edge style
--wj-button-border-widthWidth of the button edges
--wje-button-colorButton text colour

Slots

NameDescription
``The contents are placed between the named slots.
caretThe content is placed to the right of the button text in LTR and to the left in RTL.
endThe content is placed to the right of the button text in LTR and to the left in RTL.
icon-onlyIt should be applied to an icon in a button that does not contain text.
startThe content is placed to the left of the button text in LTR and to the right in RTL.