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

Description	If true, a check icon will appear in the button
Attribute	active
Type	boolean
Default	'false'

caret

Description	If true, a space for the caret icon appears in the button
Attribute	caret
Type	boolean
Default	'false'

color

Description	The 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.
Attribute	color
Type	"danger." ｜ "primary" ｜ "success" ｜ "neutral" ｜ "complete" ｜ "warning" ｜ string ｜ undefined
Default	undefined

dialog

Description	Associates 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.
Attribute	dialog
Type	string
Default	undefined

disabled

Description	If true, the user cannot interact with the button.
Attribute	disabled
Type	boolean
Default	false

fill

Description	Set 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".
Attribute	fill
Type	"link" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined
Default	undefined

size

Description	Set 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.
Attribute	size
Type	"default" ｜ "large" ｜ "small" ｜ undefined
Default	undefined

toggle

Description	Allows 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.
Attribute	toggle
Type	any
Default	false

tooltip

Description	Allows you to add text that will be displayed when the mouse hovers over the button.
Attribute	tooltip
Type	any
Default	false

tooltip-placement

Description	Specifies the position of the text in the "tooltip" attribute. The default position is "top"
Attribute	tooltip-placement
Type	any
Default	top

Events

Name	Description
wje-button:click	The wje-button:click event is fired when the button is clicked.
wje-button:reset	The wje-button:reset event is fired when a button of type 'reset' is clicked when the associated form is reset.
wje-button:submit	The wje-button:submit event is fired when a button of type 'submit' is clicked when a form submission is triggered.
wje-button:toggle	The 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

Name	Description
native	Refers to the <a> element inside the button

CSS Custom Properties

Name	Description
--wje-button-background-color	Button background colour
--wj-button-border-color	Button edge colour
--wj-button-border-radius	Rounding the edges of the button
--wj-button-border-style	Button edge style
--wj-button-border-width	Width of the button edges
--wje-button-color	Button text colour

Slots

Name	Description
``	The contents are placed between the named slots.
caret	The content is placed to the right of the button text in LTR and to the left in RTL.
end	The content is placed to the right of the button text in LTR and to the left in RTL.
icon-only	It should be applied to an icon in a button that does not contain text.
start	The content is placed to the left of the button text in LTR and to the right in RTL.