DÁP Design System - Button webcomponent

Button

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

Examples

Variants

The button component comes in three variants: default (primary), outline, subtle, primary-inverted, outline-inverted, subtle-inverted, subtle-neutral. 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-button variant="subtle-neutral">
  Login
</dap-ds-button>
</dap-ds-stack>
<br/>
<p style={{background: 'var(--dds-indigo-1000)', padding: 10}}>
<dap-ds-stack direction="row">
  <dap-ds-button variant="primary-inverted">
    Login
  </dap-ds-button>

  <dap-ds-button variant="outline-inverted">
    Login
  </dap-ds-button>

  <dap-ds-button variant="subtle-inverted">
    Login
  </dap-ds-button>
</dap-ds-stack>
</p>
<br/>
Pure CSS buttons:
<dap-ds-stack direction="row">
<button className="dds-button dds-button--primary dds-button--md">Login</button>
<button className="dds-button dds-button--outline dds-button--md">Login</button>
<button className="dds-button dds-button--subtle dds-button--md">Login</button>
<button className="dds-button dds-button--subtle-neutral dds-button--md">Login</button>
</dap-ds-stack>
<br/>
<p style={{background: 'var(--dds-indigo-1000)', padding: 10}}>
<dap-ds-stack direction="row">
  <button className="dds-button dds-button--primary-inverted dds-button--md">Login</button>
  <button className="dds-button dds-button--outline-inverted dds-button--md">Login</button>
  <button className="dds-button dds-button--subtle-inverted dds-button--md">Login</button>
</dap-ds-stack>
</p>
</>

Shape

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. If you are using only an icon for the content of the button, you always have to use the aria-label attribute to provide a label for the button.

<>
<dap-ds-stack direction="row">
<dap-ds-button aria-label="Close">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</dap-ds-button>

<dap-ds-button shape="circle" aria-label="Close">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</dap-ds-button>
</dap-ds-stack>
<br/>
Pure CSS buttons:
<dap-ds-stack direction="row">
<button className="dds-button dds-button--primary dds-button--md" aria-label="Close">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</button>

 <button className="dds-button dds-button--primary dds-button--md dds-button--circle" aria-label="Close">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</button>
</dap-ds-stack>
</>

Sizes

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>
<br/>
Pure CSS buttons:
<dap-ds-stack direction="row">
<button className="dds-button dds-button--primary dds-button--xs">Login</button>
<button className="dds-button dds-button--primary dds-button--sm">Login</button>
<button className="dds-button dds-button--primary dds-button--md">Login</button>
<button className="dds-button dds-button--primary dds-button--lg">Login</button>
</dap-ds-stack>
</>

Icon position

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 aria-label="Bezár">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</dap-ds-button>
</dap-ds-stack>

Statuses

The button component can have a status of loading, danger, or disabled.

<>
<dap-ds-stack direction="row">
<dap-ds-button size="xs" loading>
  Login
</dap-ds-button>
<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>

<br/>
Pure CSS buttons:
<dap-ds-stack direction="row">
<button className="dds-button dds-button--primary dds-button--xs dds-button--loading">
  <span>Loading...</span>
</button>
<button className="dds-button dds-button--primary dds-button--md dds-button--loading">
  <span>Loading...</span>
</button>
<button className="dds-button dds-button--primary dds-button--md dds-button--danger">Login</button>
<button className="dds-button dds-button--primary dds-button--md" disabled>Login</button>
</dap-ds-stack>
</>

As link

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-stack>
<dap-ds-button href="https://services.gov.hu">
Services
</dap-ds-button>

Pure CSS buttons:
<a
className="dds-button dds-link dds-button--primary dds-button--md"
href="https://services.gov.hu"
style={{ alignSelf: 'flex-start' }}
>
Services
</a>
</dap-ds-stack>

Importing

import { DapDSButton } from 'dap-design-system/dist/dds'

Importing React

import { DapDSButtonReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`variant`	`'primary'`, `'outline'` , `'subtle'` , `'subtle-neutral'` , `'clean'` , `'primary-inverted'` , `'outline-inverted'` , `'subtle-inverted'` , `'clean-inverted'`	`'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`.

Slots

Name	Description
`(default)`	The content of the button.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main button container.
`high-contrast`	The high contrast part of the button.

CSS Custom Properties

Property Name	Description
`--dds-button-padding-x`	Horizontal padding of the button (default: var(--dds-spacing-300))
`--dds-button-padding-y`	Vertical padding of the button (default: var(--dds-spacing-300))
`--dds-button-border-radius`	Border radius of the button (default: var(--dds-radius-rounded))
`--dds-button-font-weight`	Font weight of the button (default: 700)
`--dds-button-line-height`	Line height of the button (default: var(--dds-font-line-height-large))
`--dds-button-transition`	Transition property of the button (default: all 0.2s ease-in-out)
`--dds-button-disabled-opacity`	Opacity of disabled button (default: 0.5)
`--dds-button-size-lg`	Size of large button (default: var(--dds-spacing-1200))
`--dds-button-size-md`	Size of medium button (default: var(--dds-spacing-1000))
`--dds-button-size-sm`	Size of small button (default: var(--dds-spacing-800))
`--dds-button-size-xs`	Size of extra small button (default: var(--dds-spacing-600))
`--dds-button-circle-lg`	Size of large circle button (default: var(--dds-spacing-1200))
`--dds-button-circle-md`	Size of medium circle button (default: var(--dds-spacing-1000))
`--dds-button-circle-sm`	Size of small circle button (default: var(--dds-spacing-800))
`--dds-button-circle-xs`	Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties:
`--dds-button-primary-color-bg`	Background color of primary button (default: var(--dds-button-primary-background-enabled))
`--dds-button-primary-color-bg-hover`	Background color of primary button on hover (default: var(--dds-button-primary-background-hover))
`--dds-button-primary-color-bg-active`	Background color of primary button when active (default: var(--dds-button-primary-background-pressed))
`--dds-button-primary-color-bg-disabled`	Background color of disabled primary button (default: var(--dds-button-primary-background-disabled))
`--dds-button-primary-color-text`	Text color of primary button (default: var(--dds-button-primary-text-enabled))
`--dds-button-primary-color-text-disabled`	Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties:
`--dds-button-primary-inverted-color-bg`	Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled))
`--dds-button-primary-inverted-color-bg-hover`	Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover))
`--dds-button-primary-inverted-color-bg-active`	Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed))
`--dds-button-primary-inverted-color-bg-disabled`	Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled))
`--dds-button-primary-inverted-color-text`	Text color of primary inverted button (default: var(--dds-button-primary-text-inverted))
`--dds-button-primary-inverted-color-text-disabled`	Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties:
`--dds-button-outline-color-border`	Border color of outline button (default: var(--dds-button-outline-border-enabled))
`--dds-button-outline-color-border-hover`	Border color of outline button on hover (default: var(--dds-button-outline-border-hover))
`--dds-button-outline-color-border-active`	Border color of outline button when active (default: var(--dds-button-outline-border-pressed))
`--dds-button-outline-color-border-disabled`	Border color of disabled outline button (default: var(--dds-button-outline-border-disabled))
`--dds-button-outline-color-text`	Text color of outline button (default: var(--dds-button-outline-text-enabled))
`--dds-button-outline-color-text-hover`	Text color of outline button on hover (default: var(--dds-button-outline-text-hover))
`--dds-button-outline-color-text-active`	Text color of outline button when active (default: var(--dds-button-outline-text-pressed))
`--dds-button-outline-color-text-disabled`	Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties:
`--dds-button-outline-inverted-color-border`	Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled))
`--dds-button-outline-inverted-color-border-hover`	Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover))
`--dds-button-outline-inverted-color-border-active`	Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed))
`--dds-button-outline-inverted-color-border-disabled`	Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled))
`--dds-button-outline-inverted-color-text`	Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled))
`--dds-button-outline-inverted-color-text-hover`	Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover))
`--dds-button-outline-inverted-color-text-active`	Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed))
`--dds-button-outline-inverted-color-text-disabled`	Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties:
`--dds-button-subtle-color-bg`	Background color of subtle button (default: var(--dds-button-subtle-background-enabled))
`--dds-button-subtle-color-bg-hover`	Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover))
`--dds-button-subtle-color-bg-active`	Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed))
`--dds-button-subtle-color-bg-disabled`	Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled))
`--dds-button-subtle-color-border`	Border color of subtle button (default: var(--dds-button-subtle-border-enabled))
`--dds-button-subtle-color-border-hover`	Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover))
`--dds-button-subtle-color-border-active`	Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed))
`--dds-button-subtle-color-border-disabled`	Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled))
`--dds-button-subtle-color-text`	Text color of subtle button (default: var(--dds-button-subtle-text-enabled))
`--dds-button-subtle-color-text-hover`	Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover))
`--dds-button-subtle-color-text-active`	Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))
`--dds-button-subtle-color-text-disabled`	Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties:
`--dds-button-clean-color-text`	Text color of clean button (default: var(--dds-text-link-base))
`--dds-button-clean-color-text-hover`	Text color of clean button on hover (default: var(--dds-text-link-hover))
`--dds-button-clean-color-text-active`	Text color of clean button when active (default: var(--dds-text-link-pressed))
`--dds-button-clean-color-text-disabled`	Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties:
`--dds-button-clean-inverted-color-text`	Text color of clean inverted button (default: var(--dds-button-primary-text-inverted))
`--dds-button-clean-inverted-color-text-hover`	Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted))
`--dds-button-clean-inverted-color-text-active`	Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted))
`--dds-button-clean-inverted-color-text-disabled`	Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties:
`--dds-button-danger-color-bg`	Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled))
`--dds-button-danger-color-bg-hover`	Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover))
`--dds-button-danger-color-bg-active`	Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed))
`--dds-button-danger-color-text`	Text color of danger button (default: var(--dds-button-primary-text-enabled))
`--dds-button-danger-outline-color-border`	Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled))
`--dds-button-danger-outline-color-border-hover`	Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover))
`--dds-button-danger-outline-color-border-active`	Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed))
`--dds-button-danger-outline-color-text`	Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled))
`--dds-button-danger-outline-color-text-hover`	Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover))
`--dds-button-danger-outline-color-text-active`	Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed))
`--dds-button-danger-subtle-color-bg`	Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled))
`--dds-button-danger-subtle-color-bg-hover`	Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover))
`--dds-button-danger-subtle-color-bg-active`	Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed))
`--dds-button-danger-subtle-color-text`	Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled))
`--dds-button-danger-subtle-color-text-hover`	Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover))
`--dds-button-danger-subtle-color-text-active`	Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed))
`--dds-button-danger-clean-color-text`	Text color of danger clean button (default: var(--dds-text-negative-subtle))
`--dds-button-danger-clean-color-text-hover`	Text color of danger clean button on hover (default: var(--dds-text-negative-base))
`--dds-button-danger-clean-color-text-active`	Text color of danger clean button when active (default: var(--dds-text-negative-strong))