The button component enhances the native <button> and <a> elements. A button holds text, an icon or a combination of both. When using an icon only, it needs to be self-explanatory and must have an aria-label that describes what happens when it is clicked.

While a <button> element should be used whenever some action is performed, <a> elements should be used when the user will navigate to another view. The button width is based on the text it holds. While being as short as possible, the text should clearly describe a button's action.

<button dt-button>Simple button</button>
<a href="#" dt-button>Simple anchor button</a>

Imports

You have to import the DtButtonModule when you want to use the dt-button or the dt-icon-button:

@NgModule({
  imports: [DtButtonModule],
})
class MyModule {}

Initialization

To use the button component, add one of the following attributes to the <button> and <a> elements:

Attribute Description
dt-button Regular button, with text and an optional icon.
dt-icon-button Icon only button, no text allowed.

Inputs

Name Type Default Description
disabled boolean | undefined undefined Whether the button is disabled.
color string main Sets the button color. Possible options:
  • main (default)
  • warning
  • cta
variant string primary Sets the button variant. Possible options:
  • primary (default)
  • secondary
  • nested (Only available for dt-icon-button.)

States

The button has a default, hover, active, focus and disabled state.

Variants

Compared to the secondary button, the primary button is more dominant and will attract the users attention with ease. This can be used to guide the user and help him perform the right actions. The secondary button is used for secondary actions.

Primary and secondary

<button dt-button>Primary button</button>
<button dt-button variant="secondary">Secondary button</button>

Primary and secondary with icon

<p>
  <button dt-button>
    <dt-icon name="user-uem"></dt-icon>
    Primary with icon
  </button>
  <button dt-button variant="secondary">
    <dt-icon name="user-uem"></dt-icon>
    Secondary with icon
  </button>
</p>
<p>
  <button dt-button color="warning">
    <dt-icon name="user-uem"></dt-icon>
    Primary with icon
  </button>
  <button dt-button color="warning" variant="secondary">
    <dt-icon name="user-uem"></dt-icon>
    Secondary with icon
  </button>
</p>
<p>
  <button dt-button color="cta">
    <dt-icon name="user-uem"></dt-icon>
    Primary with icon
  </button>
  <button dt-button color="cta" variant="secondary">
    <dt-icon name="user-uem"></dt-icon>
    Secondary with icon
  </button>
</p>

Icon only

<button dt-icon-button aria-label="An example button containing an icon">
  <dt-icon name="user-uem"></dt-icon>
</button>
<a
  dt-icon-button
  href="#"
  aria-label="An example button containing a proxy icon"
>
  <dt-icon name="proxy"></dt-icon>
</a>
<button
  dt-icon-button
  variant="secondary"
  aria-label="An example secondary button containing an icon"
>
  <dt-icon name="user-uem"></dt-icon>
</button>
<button
  dt-icon-button
  variant="nested"
  aria-label="An example nested button containing an icon"
>
  <dt-icon name="background"></dt-icon>
</button>
<button
  dt-icon-button
  color="warning"
  aria-label="An example warning button containing an icon"
>
  <dt-icon name="user-uem"></dt-icon>
</button>
<button
  dt-icon-button
  color="warning"
  variant="secondary"
  aria-label="An example warning button containing an icon"
>
  <dt-icon name="proxy"></dt-icon>
</button>
<button
  dt-icon-button
  color="warning"
  variant="nested"
  aria-label="An example warning button containing an icon"
>
  <dt-icon name="background"></dt-icon>
</button>
<button
  dt-icon-button
  color="cta"
  aria-label="An example CTA button containing an icon"
>
  <dt-icon name="user-uem"></dt-icon>
</button>
<button
  dt-icon-button
  color="cta"
  variant="secondary"
  aria-label="An example CTA button containing an icon"
>
  <dt-icon name="proxy"></dt-icon>
</button>
<button
  dt-icon-button
  color="cta"
  variant="nested"
  aria-label="An example CTA button containing an icon"
>
  <dt-icon name="background"></dt-icon>
</button>

Nested button

Nested buttons are a variant of icon only buttons and can't be used with text. These buttons are only used within other components (e.g. input fields, tables,...)

Colors

The button component is colored differently in the context of:

  • primary: Default button, see above.
  • a warning: Use this kind of button where a user action is needed to get something back up and running. E.g. restart processes, update agent,...
  • a call to action: Use this kind of button to encourage users to buy our product. E.g. install an agent, install security gateway, upgrade web check,...
<button dt-button>Button in main color</button>
<button dt-button color="warning">Button in warning color</button>
<button dt-button color="cta">Button in cta color</button>

Dark theme

All button variants can also be put on a dark background. You can set a (dark) theme on an area of the app by using the dtTheme directive.

<section class="dt-example-dark" dtTheme=":dark">
  <div class="dt-example-variant">
    <h4>Primary Button</h4>
    <p>
      <button dt-button>Default Button</button>
      <button dt-button color="warning">Warning Button</button>
      <button dt-button color="cta">CTA Button</button>
    </p>
    <p>
      <button dt-button>
        <dt-icon name="user-uem"></dt-icon>
        Default with icon
      </button>
      <button dt-button color="warning">
        <dt-icon name="user-uem"></dt-icon>
        Warning with icon
      </button>
      <button dt-button color="cta">
        <dt-icon name="user-uem"></dt-icon>
        CTA with icon
      </button>
    </p>
    <p>
      <button dt-icon-button aria-label="An example button containing an icon">
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        color="warning"
        aria-label="An example warning button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        color="cta"
        aria-label="An example CTA button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
    </p>
  </div>
  <div class="dt-example-variant">
    <h4>Secondary Button</h4>
    <p>
      <button dt-button variant="secondary">Secondary Button</button>
      <button dt-button variant="secondary" color="warning">
        Secondary Warning Button
      </button>
      <button dt-button variant="secondary" color="cta">
        Secondary CTA Button
      </button>
    </p>
    <p>
      <button dt-button variant="secondary">
        <dt-icon name="user-uem"></dt-icon>
        Default with icon
      </button>
      <button dt-button variant="secondary" color="warning">
        <dt-icon name="user-uem"></dt-icon>
        Warning with icon
      </button>
      <button dt-button variant="secondary" color="cta">
        <dt-icon name="user-uem"></dt-icon>
        CTA with icon
      </button>
    </p>
    <p>
      <button
        dt-icon-button
        variant="secondary"
        aria-label="An example button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        variant="secondary"
        color="warning"
        aria-label="An example warning button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        variant="secondary"
        color="cta"
        aria-label="An example CTA button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
    </p>
  </div>
  <div class="dt-example-variant">
    <h4>Nested Button</h4>
    <button
      dt-icon-button
      variant="nested"
      aria-label="An example nested button containing an icon"
    >
      <dt-icon name="user-uem"></dt-icon>
    </button>
  </div>
  <div class="dt-example-variant">
    <h4>Disabled Button</h4>
    <p>
      <button dt-button disabled>Disabled Button</button>
      <button dt-button disabled variant="secondary">
        Disabled Secondary Button
      </button>
    </p>
    <p>
      <button dt-button disabled>
        <dt-icon name="user-uem"></dt-icon>
        Default with icon
      </button>
      <button dt-button disabled variant="secondary">
        <dt-icon name="user-uem"></dt-icon>
        Warning with icon
      </button>
    </p>
    <p>
      <button
        dt-icon-button
        disabled
        aria-label="A disabled example button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        disabled
        variant="secondary"
        aria-label="A disabled example button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
      <button
        dt-icon-button
        disabled
        variant="nested"
        aria-label="A disabled example button containing an icon"
      >
        <dt-icon name="user-uem"></dt-icon>
      </button>
    </p>
  </div>
</section>

Accessibility

By using native <button> or <a> elements, accessibility is ensured per default. Buttons or links containing only icons (dt-icon-button) should be given a meaningful label via aria-label or aria-labelledby, that describes the action that is performed when the button is clicked.

Buttons in use

Buttons are used in a variety of contexts, e.g. as secondary or nested buttons within tables, in context menus, or as part of the copy to clipboard component.

Placement

A button's margin is always 8px. Make sure there is a gap of 8px when buttons are placed next to or below each other.

It depends on the use case if a button is left- or right-aligned. Have a look at our button alignment pattern for details.

Interaction

Use the click event binding to perform any action when the button is clicked.

<button dt-button (click)="counter = counter + 1">Increase Counter</button>
<p>Counter: {{ counter }}</p>

Disabled state

When it's not possible to perform the action that is triggered by clicking the button, it must be disabled.

<p>
  <button dt-button disabled>Disabled Button</button>
  <button dt-button disabled variant="secondary">
    Disabled Secondary Button
  </button>
</p>
<p>
  <button dt-button disabled>
    <dt-icon name="user-uem"></dt-icon>
    Default with icon
  </button>
  <button dt-button disabled variant="secondary">
    <dt-icon name="user-uem"></dt-icon>
    Warning with icon
  </button>
</p>
<p>
  <button
    dt-icon-button
    disabled
    aria-label="A disabled example button containing an icon"
  >
    <dt-icon name="user-uem"></dt-icon>
  </button>
  <button
    dt-icon-button
    disabled
    variant="secondary"
    aria-label="A disabled example button containing an icon"
  >
    <dt-icon name="user-uem"></dt-icon>
  </button>
  <button
    dt-icon-button
    disabled
    variant="nested"
    aria-label="A disabled example button containing an icon"
  >
    <dt-icon name="user-uem"></dt-icon>
  </button>
</p>

When the button is clicked and the triggered action takes some time to complete, the button is disabled (so that it cannot be clicked again) and a loading spinner is shown within the disabled button.

<button dt-button disabled>
  <dt-loading-spinner aria-label="Waiting for network to respond">
  </dt-loading-spinner>
  Waiting for response
</button>
<button dt-button disabled variant="secondary">
  <dt-loading-spinner aria-label="Waiting for network to respond">
  </dt-loading-spinner>
  Waiting for response
</button>