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. 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>
<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>
</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.

<>
<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>
<br/>
Pure CSS buttons:
<dap-ds-stack direction="row">
<button className="dds-button dds-button--primary dds-button--md">
  <dap-ds-icon name="close-line"></dap-ds-icon>
</button>

 <button className="dds-button dds-button--primary dds-button--md dds-button--circle">
  <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>
  <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'` , `'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.