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.

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.

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.

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 colours

The color property modifies 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.

Colour of the button edges

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'

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

Events

Name	Description
dialog	Called when the button is clicked

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
--wj-color-base	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
--wj-color-contrast	Button text colour
--wj-padding-bottom	Bottom inner indent button
--wj-padding-end	Right internal offset if the direction is LTR, and left internal offset if the direction is RTL button
--wj-padding-start	Left internal offset if the direction is LTR, and right internal offset if the direction is RTL button
--wj-padding-top	Upper internal offset button

Slots

Name	Description
``	The contents are placed between the named slots.
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.