The button component is a component that triggers an action when clicked. It can be used to submit forms, navigate to a new page, or trigger any other action that can be handled by JavaScript.
Design system docs
The button component comes in three variants: default (primary), outline, and subtle. The default variant is used for primary actions, the outline variant is used for secondary actions, and the subtle variant is used for tertiary actions.
<dap-ds-stack direction="row"> <dap-ds-button> Login </dap-ds-button> <dap-ds-button variant="outline"> Login </dap-ds-button> <dap-ds-button variant="subtle"> Login </dap-ds-button> </dap-ds-stack>
The button component comes in two shapes: button (rounded), and circle. The default shape is used for most buttons, and the circle shape is used for buttons that need to stand out.
<dap-ds-stack direction="row"> <dap-ds-button> <dap-ds-icon name="close-line"></dap-ds-icon> </dap-ds-button> <dap-ds-button shape="circle"> <dap-ds-icon name="close-line"></dap-ds-icon> </dap-ds-button> </dap-ds-stack>
The button component comes in three sizes: small, medium, and large. The small size is used for buttons in tight spaces, the medium size is used for most buttons, and the large size is used for buttons that need to stand out.
<dap-ds-stack direction="row"> <dap-ds-button size="sm"> Login </dap-ds-button> <dap-ds-button> Login </dap-ds-button> <dap-ds-button size="lg"> Login </dap-ds-button> </dap-ds-stack>
The button component can have an icon on the left or right side of the text.
<dap-ds-stack direction="row"> <dap-ds-button> <dap-ds-stack direction="row"> <dap-ds-icon name="close-line"></dap-ds-icon> <span>Bezár</span> </dap-ds-stack> </dap-ds-button> <dap-ds-button> <dap-ds-stack direction="row-reverse"> <dap-ds-icon name="close-line"></dap-ds-icon> <span>Bezár</span> </dap-ds-stack> </dap-ds-button> <dap-ds-button> <dap-ds-icon name="close-line"></dap-ds-icon> </dap-ds-button> </dap-ds-stack>
The button component can have a status of loading, danger, or disabled.
<dap-ds-stack direction="row"> <dap-ds-button loading> Login </dap-ds-button> <dap-ds-button danger> Login </dap-ds-button> <dap-ds-button disabled> Login </dap-ds-button> </dap-ds-stack>
The button component can be used as a link by providing an href attribute. It will render an anchor tag instead of a button.
<dap-ds-button href="https://services.gov.hu"> Services </dap-ds-button>
import { DapDSButton } from 'dap-design-system/dist/dds'
import { DapDSButtonReact } from 'dap-design-system/dist/react'
| Name | Description |
|---|---|
(default) | The content of the button. |
| Property | Type | Default | Description |
|---|---|---|---|
variant | ButtonVariant | 'primary' | The type of the button. Default is primary. Can be primary, outline, subtle, or clean. |
size | ButtonSize | 'md' | The size of the button. Default is md. Can be lg, md, or sm. |
loading | boolean | false | Whether the button is in a loading state. |
danger | boolean | false | Whether the button is a danger button. |
htmlType | HtmlButtonType | 'button' | The type of the button. Can be button, submit, or reset. Default is button. If the button is an anchor element, this attribute will be ignored. |
name | string | The name of the button. | |
href | string | The URL of the button. If this present the button will be rendered as an anchor element. | |
target | LinkTarget | '_self' | The target of the button. Default is _self. Can be _blank, _self, _parent, or _top. |
rel | string | 'noreferrer noopener' | The rel of the button link. Default is noreferrer noopener. |
shape | ButtonShape | 'button' | |
hc | boolean | false |
No custom events available.
No CSS parts available.