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="xs"> Login </dap-ds-button> <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'
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'primary', 'outline' , 'subtle' , 'clean' | 'primary' | The variant of the button |
size | 'lg', 'md' , 'sm' , 'xs' | 'md' | The size of the button |
loading | boolean | false | Whether the button is in loading state |
danger | boolean | false | Whether the button is danger button |
shape | 'button', 'circle' | 'button' | The shape of the button |
htmlType | 'button', 'submit' , 'reset' | 'button' | The html type of the button |
name | string | The name of the button | |
href | string | The Href of the button. If this present the button will be rendered as an anchor <a></a> element. | |
target | '_blank', '_self' , '_parent' , '_top' | '_self' | The target of the button |
rel | string | 'noreferrer noopener' | The rel of the button link. Default is noreferrer noopener. |
| Name | Description |
|---|---|
(default) | The content of the button. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main button container. |
high-contrast | The high contrast part of the button. |