Button - Web Component
The Button component can be used imported from:
Playground
Parameters
The Web component uses the <z-button> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
config | string | The main parameter has three components following the pattern:
| ||
icon | string | The name of the icon that will be shown up inside the button. Check the icon list | ||
content | string | The text that will be shown up inside the button. | default | |
icon-right | boolean | Defines the position of the icon. The default value is | ||
disabled | boolean | Blocks the interaction with the component. | ||
loading | boolean | Shows a loading animation inside the button. | ||
wide | boolean string | Expands the button to the full width of its parent. | ||
href | string | Transform the button into a link. | ||
target | string | The target attribute specifies where to open the linked document. | ||
popover-target | string | Refers to the popover element with the specified id, and toggle between showing and hiding it. Check the official docs | ||
as-submit | boolean | Transform the button into a submit input. |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
click | MouseEvent | ... |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | Content of the button. |
popover | span | Used for popover content |
Parameters use
Check the documentation about how to use the parameters.
content
The text or content inside the button. It uses the default slot too.
config
type
The z-button component will use the primary type as default, matching the primary type of the specifications.
There are four more types of buttons, secondary, negative, positive, and link
size
The first modifier is size defines the size of the button. The value is m, being omitted from the parameter. The possible values for size are: xs, s or l. Check the size section.
round
The second modifier is round, that can receive the value round to implement a round styling to the button.
This configuration is also applied by default if the button doesn't have text. For example, only having an icon:
TIP
Make sure the content of the round button it's short and concise. Best approach would be to use a simple call to action icon
icon
The attribute icon it's useful to insert a specific CTA icon. Check the icon list here. This attribute will receive the name of the icon to be show. You can use both solid or line (outlined) version.
Only icon
If we use only the icon, the config can still be set:
Flags
icon-right
This attribute will display the icon on the right side of the text.
disabled
The attribute disabled will block the interaction with the component.
loading
A loading indicator can be added to a button by setting the loading attribute.
wide
The wide attribute will make the button take the full width of the parent container.
There's an option of using spread value to distribute the items with the elements apart:
Button as link
Button can directly be used as links. Just provide a href attribute. The target attribute will be also available.
Special uses
Back to top
For a smooth behavior in the navigation, use this CSS code:
css
html {
scroll-behavior: smooth;
}Popover
Using the Popover API and the popover-target attribute, we can achieve an easy popover behavior:
Popover content
We can also directly use the popoverslot. In this case, the popover is pre-styled:
Slotted Popover
The popover element can be customized in this case using the CSS selector z-button::part(popover). The exposed tokens for the customization are:
--z-button--backdrop--z-button--popover-padding--z-button--popover-radius
Browser support
Detected engine:
Chromium
Webkit
Gecko