Button

Button details

This component is themable.

Tagged with button component angular

The button component is used for navigating and triggering actions. A button holds text, an icon or a combination of both. When using an icon only, it needs to be self-explanatory.

´ Loading interactive demo...
<button dt-button>Simple button</button> <a href="#" dt-button>Simple anchor button</a> export class DefaultButtonExampleComponent { } <button dt-button>Simple button</button> <a href="#" dt-button>Simple anchor button</a> export class DefaultButtonExampleComponent { }

States

The button has a default, hover, active, focus and disabled state, as shown in the example above. The following examples show multiple button variants in their disabled state.

´ Loading interactive demo...
<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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> export class DisabledButtonExampleComponent { } <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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> export class DisabledButtonExampleComponent { }

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

´ Loading interactive demo...
<button dt-button>Primary button</button> <button dt-button variant="secondary">Secondary button</button> export class VariantButtonExampleComponent {} <button dt-button>Primary button</button> <button dt-button variant="secondary">Secondary button</button> export class VariantButtonExampleComponent {}

Primary and secondary with icon

´ Loading interactive demo...
<p> <button dt-button><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="warning" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="cta" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p> export class IconsButtonExampleComponent {} <p> <button dt-button><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="warning" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="cta" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p> export class IconsButtonExampleComponent {}

Icon only

´ Loading interactive demo...
<button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></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 agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="secondary" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="nested" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="secondary" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="nested" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> export class IconOnlyButtonExampleComponent {} // tslint:enable:max-line-length <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></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 agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="secondary" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="nested" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="secondary" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="nested" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> export class IconOnlyButtonExampleComponent {} // tslint:enable:max-line-length

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,...)

Buttons on dark background

All button variants can also be put on a dark background.

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button variant="secondary" color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button variant="secondary" color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button variant="secondary" aria-label="An example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="variant"> <h4>Nested Button</h4> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> </section> export class DarkButtonExampleComponent { } <section class="dark" dtTheme=":dark"> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button variant="secondary" color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button variant="secondary" color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button variant="secondary" aria-label="An example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="variant"> <h4>Nested Button</h4> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> </section> export class DarkButtonExampleComponent { }

Themes

The button component is themable and colored differently in the context of:

  • primary: Default button, see above.
  • a warning: Only 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: Only use this kind of button to encourage users to buy our product. E.g. install an agent, install security gateway, upgrade web check,...
´ Loading interactive demo...
<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> export class ColorButtonExampleComponent { } <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> export class ColorButtonExampleComponent { }

Placement

Have a look at our button alignment pattern.

Behavior and corner cases

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.

Buttons in use

Buttons margin and padding

Buttons margin and padding
x: 8px

Multiple buttons

Buttons beside each other
x: 8px
Buttons underneath each other
x: 8px

Buttons in tables

Use secondary or nested buttons within tables.

Buttons in context menus

View the context dialog component.

Buttons in call to action cards

View the call to action component.

Copy to clipboard

View the copy to clipboard component.

´ Loading interactive demo...
<button dt-button>Simple button</button> <a href="#" dt-button>Simple anchor button</a> export class DefaultButtonExampleComponent { } <button dt-button>Simple button</button> <a href="#" dt-button>Simple anchor button</a> export class DefaultButtonExampleComponent { }

This Angular button enhances native <button> and <a> elements with Dynatrace styling. Make sure to always use <button> or <a> tags to provide an accessible experience for the user. 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.

Imports

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


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

Initialization

To apply the dynatrace button, 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 Sets disable state if property is set and the value is truthy or undefined
color string | undefined main Sets color. Possible options:
  • main (default)
  • warning
  • cta
variant string | undefined primary Sets variant. Possible options:
  • primary (default)
  • secondary
  • nested Only available for dt-icon-button

Theming

The button styling depends on the theme the component is used in. You can set a theme on an area of the app by using the dtTheme directive.


<div dtTheme="purple:dark">
  <button dt-button>My themed button</button>
</div>

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.

Examples

Interaction

´ Loading interactive demo...
<button dt-button (click)="counter = counter + 1 ">Increase Counter</button> <p>Counter: {{counter}}</p> export class InteractionButtonExampleComponent { counter = 0; } <button dt-button (click)="counter = counter + 1 ">Increase Counter</button> <p>Counter: {{counter}}</p> export class InteractionButtonExampleComponent { counter = 0; }

Variants

´ Loading interactive demo...
<button dt-button>Primary button</button> <button dt-button variant="secondary">Secondary button</button> export class VariantButtonExampleComponent {} <button dt-button>Primary button</button> <button dt-button variant="secondary">Secondary button</button> export class VariantButtonExampleComponent {}

Colors

´ Loading interactive demo...
<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> export class ColorButtonExampleComponent { } <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> export class ColorButtonExampleComponent { }

With Icons

´ Loading interactive demo...
<p> <button dt-button><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="warning" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="cta" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p> export class IconsButtonExampleComponent {} <p> <button dt-button><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="warning" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p><p> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>Primary with icon</button> <button dt-button color="cta" variant="secondary"><dt-icon name="agent"></dt-icon>Secondary with icon</button> </p> export class IconsButtonExampleComponent {}

With loading spinner

The loading spinner can only be used within a disabled button.

´ Loading interactive demo...
<button dt-button disabled><dt-loading-spinner></dt-loading-spinner>Waiting for response</button> <button dt-button disabled variant="secondary"><dt-loading-spinner></dt-loading-spinner>Waiting for response</button> export class LoadingSpinnerButtonExampleComponent {} <button dt-button disabled><dt-loading-spinner></dt-loading-spinner>Waiting for response</button> <button dt-button disabled variant="secondary"><dt-loading-spinner></dt-loading-spinner>Waiting for response</button> export class LoadingSpinnerButtonExampleComponent {}

Icon only

´ Loading interactive demo...
<button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></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 agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="secondary" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="nested" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="secondary" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="nested" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> export class IconOnlyButtonExampleComponent {} // tslint:enable:max-line-length <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></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 agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="secondary" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" variant="nested" aria-label="An example warning button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="secondary" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="cta" variant="nested" aria-label="An example CTA button containing an agent icon"><dt-icon name="agent"></dt-icon></button> export class IconOnlyButtonExampleComponent {} // tslint:enable:max-line-length

Disabled example

´ Loading interactive demo...
<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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> export class DisabledButtonExampleComponent { } <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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> export class DisabledButtonExampleComponent { }

Dark

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button variant="secondary" color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button variant="secondary" color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button variant="secondary" aria-label="An example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="variant"> <h4>Nested Button</h4> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> </section> export class DarkButtonExampleComponent { } <section class="dark" dtTheme=":dark"> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button aria-label="An example button containing an agent icon"><dt-icon name="agent"></dt-icon></button> <button dt-icon-button color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button variant="secondary" color="warning"><dt-icon name="agent"></dt-icon>Warning with icon</button> <button dt-button variant="secondary" color="cta"><dt-icon name="agent"></dt-icon>CTA with icon</button> </p><p> <button dt-icon-button variant="secondary" aria-label="An example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="warning" aria-label="An example warning button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button variant="secondary" color="cta" aria-label="An example CTA button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> <div class="variant"> <h4>Nested Button</h4> <button dt-icon-button variant="nested" aria-label="An example nested button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </div> <div class="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="agent"></dt-icon>Default with icon</button> <button dt-button disabled variant="secondary"><dt-icon name="agent"></dt-icon>Warning with icon</button> </p><p> <button dt-icon-button disabled aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="secondary" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> <button dt-icon-button disabled variant="nested" aria-label="A disabled example button containing an agent icon"> <dt-icon name="agent"></dt-icon> </button> </p> </div> </section> export class DarkButtonExampleComponent { }