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