<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Colors:</strong> Neutral color added for unbranded or secondary CTAs.</li>
<li><strong>Icons:</strong> Right‑side icons are now limited to arrow icons only.</li>
<li><strong>Sizes:</strong> Introduced a minimum width rule to prevent buttons from becoming too small.</li>
<li><strong>Paddings:</strong> Updated spacing for consistent hierarchy.</li>
<li><strong>Kinds:</strong> Outline and minimal button now always use a white background for better contrast. A new ghost kind has been added for lowest‑priority actions.</li>
<li><strong>Variants:</strong> Button variants are now simplified to: Brand, Neutral, Success, Destructive.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Buttons are clickable interface components that initiate an action or trigger a change in state. They are not decorative elements. Buttons exist to help users complete important goals within an experience.</p>
<p>Use the button to:</p>
<ul>
<li>Trigger an action in a task or workflow.</li>
<li>Submit, confirm or progress through a process.</li>
<li>Open or initiate interactions such as dialogs, forms or additional content.</li>
<li>Provide quick access to high‑value or contextually relevant actions.</li>
</ul>
<p>Buttons and links may seem similar, but they’re not the same. Choose the component that best fits your content structure and interaction needs.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Button</td>
<td>Use to trigger an action on a page or to complete tasks in other components, such as forms and modals. Exception: “Back” and “Next” buttons may be used to navigate a guided experience.</td>
</tr>
<tr>
<td><a href="/components/link/">Link</a></td>
<td>Use to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a button, labeled 1 through 3.","caption":"Buttons can contain up to three elements:\n\n1. Label: short, call-to-action text\n2. Icon: optional icon\n3. Button container: primary element that holds content, color, and icons","url":"https://dds.dell.com/site/v3/components/button/button-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Review checklist","path":"https://confluence.dell.com/display/ACCESSIBILITY/Checklist+For+Designers","type":"External"},"title":"Design accessibility checklist ","description":"Review the Dell Accessibility team&#39;s checklist for links.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit W3 site","path":"https://www.w3.org/WAI/perspective-videos/controls/","type":"External"},"title":"Large Links, Buttons, and Controls ","description":"Learn about accessible controls.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance AI chatbot interaction, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

A screen can include one or multiple buttons. Choose the button type and style based on the action you want the user to take.

Use buttons for actions that change the system state, submit information, or move the user through a workflow.

### Trigger

Buttons are often used to trigger additional elements or work flows, such as [modals](/components/modal/) and [drawers](/components/drawer/).

<details data-name='image-block' data-images='[{"alt":"Image showing a trigger button that displays “Sign In”.","caption":"A primary button labeled “Sign In” and a secondary button labeled “Create an Account.”","url":"https://dds.dell.com/site/v3/components/button/button-usage-trigger.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Application of settings

Use buttons to apply or save user settings. These settings may control the appearance or behavior of an application. Examples include changing account details, updating preferences, or saving notification options.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-usage-settings.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Navigation

Multi‑step forms and workflows often require more than one action. Use buttons to help users move forward, move back, or complete a step.

Use a filled button for the main forward action, like “Next.” 

Use outline, minimal, or ghost buttons for less critical actions, like “Back.”

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-usage--navigation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Use button kinds to show the level of emphasis an action should have. Choose the kind based on how important the action is and how often users need it.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 kinds of buttons: filled, outline, minila, and ghost","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-kinds-v3.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Kind      | Use case                                                                                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Filled    | A high‑emphasis style used when an action needs to stand out clearly. Because it draws strong attention, it’s usually best to use it sparingly in the same area.                |
| Secondary | A medium‑emphasis style that stays visible without being dominant. Works well alongside any other style, offering flexibility for different layouts and action groupings.       |
| Tertiary  | A low‑emphasis option for actions that should stay available but visually subtle. Minimal buttons blend into the interface and pair easily with stronger styles.                |
| Ghost     | The lightest‑emphasis style. Useful for optional or contextual actions that shouldn’t compete visually. Good for complementing higher‑emphasis buttons when building hierarchy. |

### Options

There are three options for placing icons within buttons. Use only one icon per button. Note that text within a button will expand to the right, even with the icon-left button. 

**With icon, right:** Use when the icon implies that pressing the button will bring the user forward. Right icons are limited to right arrows. 

**With icon, left:** Use when the icon implies that pressing the button will bring the user backward, such as “Back.”

**Icon-only:** Use only when the user's action is very clear and doesn't need explanatory text. Examples include down and next arrows. 

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-options.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Color

Button colors are limited to defined semantic usage, including brand (blue), destructive (red), success (green), and neutral (slate). Other [color palettes](/foundations/color/) are not available for use with buttons.

Remember that color is not a universal experience, and usage should not rely on color alone to convey meaning. Use clear, concise labels or icons to improve recognition and understanding of the action a button triggers.h

### Semantic

Buttons are available in four semantic colors: brand, destructive, success, and neutral.

A semantic color represents a specific meaning or action in the interface. Semantic colors help designers, developers, and assistive technologies understand the intended meaning and behavior behind each color choice.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 semantic colors and their corresponding icons.","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-color-semantic1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Color       | Use case                                                                                                                                                                                                                                              |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Brand       | Use a brand button (Blue 60) in most cases, especially when brand alignment is warranted. This button is used for form submissions and most primary calls-to-action. Brand buttons can be used throughout any experience and have multiple instances. |
| Destructive | Destructive buttons (Red 60) signal alarm. Use them to indicate that the action the user is about to take will remove content or otherwise result in data loss that cannot be reversed, such as “Delete.”                                             |
| Success     | Use a success button (Green 60) when presenting a choice or decision related to money or purchasing, such as “Add to Cart” or “Checkout”. Keep success buttons limited so they remain meaningful and easy to notice.                                  |
| Neutral     | Use this color for actions that are secondary or not tied to the primary brand experience. Neutral buttons fit tasks like “Cancel,” “Back,” or other options that support the main action without competing with it.                                  |

## Sizes

Buttons come in four sizes: large, medium (default), small, and mini. 

Buttons sizes should match the layout and stay consistent with the experience. Buttons are responsive and resize as breakpoints change.

Use the recommended [breakpoint guidance](/foundations/grid/#breakpoints) for each size across all grid densities and button variants.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 button sizes: large, medium, small, and mini.","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-sizes1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Size   | Use case                                                                                                                                                                                                                        |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Large  | Use this size with larger viewports or heroes that need to draw attention to a call-to-action. Recommended breakpoints: **L-12 and larger**                                                                                     |
| Medium | This default size can be used in most cases, as long as you can maintain visual balance. Recommended breakpoints: **M-6, L-12, XL-12**                                                                                          |
| Small  | Use small buttons in compact areas where a default button would not fit, such as a small component. Recommended breakpoints: **M-6 and smaller**                                                                                |
| Mini   | Use mini buttons exclusively in tables to maximize horizontal space in cells. Recommended breakpoints: **all table pixel ranges** (review the sizes section on the [table component page](/components/table/?tab=Design#sizes)) |

## Layout

### Alignment

Button groups align based on their context. In most cases, aligning button margins to the grid gutter is enough.

**Default alignment**

* Button groups are left‑aligned to follow nearby content (e.g., text blocks).

**[Empty states](https://www.delldesignsystem.com/patterns/empty-state/)**

* Button groups are center‑aligned.

**Inside container components**

* Use right‑aligned buttons in: dialogs, popovers, or cards.

**Full-page views**

* Place the button that has the primary action on the left. This matches common left‑to‑right reading patterns and helps users know where to find the main action as they move down the page.

**Modals and multi‑page forms**

* Place the button that has the primary action on the right to signal forward progression.

<details data-name='image-block' data-images='[{"alt":"Image of a full page with a primary button on the left and secondary and tertiary buttons on the right.","caption":"Full-page view with a left-aligned primary button.","url":"https://dds.dell.com/site/v3/components/button/button-layout-left-aligned.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Specifications

When grouping buttons, the recommended space between each button should be a multiple of 4 pixels, horizontally and vertically (read more about [the baseline grid on the grid foundations page](https://www.delldesignsystem.com/foundations/grid/#baseline-grid)).

Specified margins for each button size are shown below. All units of measurement are in pixels. 

Between grouped or stacked buttons, the space between buttons is:

* 16 pixels for large
* 12 pixels for medium
* 8 pixels for small
* 8 pixels for extra small

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-layout-specifications-1.png"},{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-layout-specifications-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Buttons are impacted by user interaction and show visual changes depending on the status of the interaction. Buttons communicate five states: rest, hover, press, inactive, and focus. The button state is reflected in its color and opacity.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 semantic colors in states of rest, hover, press, inactive, and focus.","caption":"","url":"https://dds.dell.com/site/v3/components/button/button-interaction1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                                       |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | When a user has not interacted with the button it will appear in its default, rest state.                                                      |
| Hover    | When a user hovers their cursor over the button’s active area, the button changes color, indicating that it is able to be pressed.             |
| Press    | When a user presses the button, the button changes color, indicating the button is in the act of being pressed.                                |
| Inactive | Inactive buttons are displayed with 40% opacity, indicating the option exists but is not available to the user.                                |
| Focus    | A blue outline appears around a button when a user tabs or uses keyboard controls to navigate. Focus states do not appear on inactive buttons. |

## Standards

### Accessibility

**Do not mix the usage of buttons and links**\
Follow the guidance above regarding when to use each. Remember buttons are for triggering actions, not navigating. Misuse causes confusion for keyboard and screen reader users, who may hear them announced by the wrong role.
<br></br>
**Make sure button labels are unique and descriptive**\
Labels like “Click Here” and “Read More” don’t provide context. In addition, some screen reader users also navigate through a list of all the buttons on a page or screen. Therefore, all button labels should provide an indication of what will happen if activated. For examples of acceptable labels, see the [content standards](/components/button/?tab=Design#standards) section on this page.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
<br></br>
**Icon-only buttons should be used carefully and only after checking for accessibility**\
The meaning of the icon must be visually self-evident (easily and universally understood). In addition, a programmatically associated semantic label (such as an aria-label attribute) should be added so it can be read by screen readers. If you’re in any doubt that an icon-only button will be understood, use accompanying text in your button label.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
<br></br>
**All buttons except tertiary should have a contrast ratio of 3:1 or greater against the background, regardless of breakpoint or orientation (except if inactive)**\
Providing good contrast ratio on buttons ensures that anyone with low vision can see them and perceive their function. If the button variant doesn’t achieve adequate contrast with the background when viewed at a specific breakpoint, and/or in a particular orientation, either change the background or consider using a different button variant. The tertiary button is an exception and should have a 4.5:1 contrast with its background at all times.\
WCAG 2.2: [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
<br></br>
**Tertiary buttons require a 4.5:1 contrast ratio against the background**\
Greater contrast is required because the text is the only part of the button that is visible. These buttons are therefore considered similar to text and will require a higher contrast ratio.\
WCAG 2.2: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum), [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
<br></br>
**When possible, use medium or large variant buttons, rather than small**\
Small buttons (24-pixel height) meet the minimum touch target requirements to ensure adequate accessibility for people with fine motor control difficulties or limited dexterity. Medium buttons (40-pixel height) are much closer to the recommended size of 44px-by-44px, and large buttons (48-pixel height) exceed it. The easier touch targets these larger sizes present for are therefore preferable.\
WCAG 2.2 (Proposed): [2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

### Content

**Button labels**\
Button text should clearly explain the action users will take once selecting the button. Avoid ambiguity. This is important for accessibility, UX, and SEO.\
**Do**: Learn About Services\
**Don’t**: Learn More
<br></br>
**Word length**\
Keep text succinct, fewer than three words, if possible.
<br></br>
**Capitalization**\
Use title case and capitalize the first letter of each word except for articles and prepositions.\
**Do**: Take a Product Tour\
**Don’t**: Take a product tour
<br></br>
**Use verbs first**\
Buttons trigger actions so start button labels with verbs. Exception: “Next” or “Back.”\
**Do**: View Product Details\
**Don’t**: List of Details
<br></br>
**One action**\
Buttons should initiate only one action per label. Do not combine actions in a label.\
**Do**: Save\
**Don’t**: Save and Exit
<br></br>
**Punctuation**\
Don’t include punctuation on button text.
<br></br>
**Special characters**\
Don’t use special characters as part of button text.
<br></br>
**Common button text for actions**:\
Add to Cart\
Search\
Cancel\
Save\
Exit\
Edit\
Delete\
Continue\
Next/Back\
Submit\
Select\
Sign In/Sign Out\
View Details\
Okay/Cancel\
Close

### SEO

Keep keywords in mind when writing button copy to improve SEO, particularly for product pages.
<br></br>
**Example:** Shop Latitude Laptops

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                    | Collection | CSS var                                              | Preview    |
| --------------------------------------- | ---------- | ---------------------------------------------------- | ---------- |
| button/gap/xs                           | Component  | `var(--dds-button-gap-xs)`                           | \-         |
| button/padding-horizontal/xs            | Component  | `var(--dds-button-padding-horizontal-xs)`            | \-         |
| button/size/xs                          | Component  | `var(--dds-button-size-xs)`                          | \-         |
| border/radius/xs                        | Semantic   | `var(--dds-border-radius-xs)`                        | \-         |
| border/width/xs                         | Semantic   | `var(--dds-color-background-neutral-subtle-hover)`   | \-         |
| color/background/NEUTRAL/subtle-hover   | Semantic   | `var(--dds-color-background-neutral-subtle-hover)`   | \#C5D4E3   |
| icon/size/xs                            | Component  | `var(--dds-icon-size-xs)`                            | \-         |
| color/text/NEUTRAL/hover                | Semantic   | `var(--dds-color-text-neutral-hover)`                | \#141D28   |
| button/background/ghost-hover           | Component  | `var(--dds-button-background-ghost-hover)`           | \#40586D1A |
| color/background/NEUTRAL/subtle-pressed | Semantic   | `var(--dds-color-background-neutral-subtle-pressed)` | \#A4B8CD   |
| color/text/NEUTRAL/pressed              | Semantic   | `var(--dds-color-text-neutral-pressed)`              | \#0A0E14   |
| button/background/ghost-pressed         | Component  | `var(--dds-button-background-ghost-pressed)`         | \#40586D33 |
| color/background/SURFACE/neutral        | Semantic   | `var(--dds-color-background-surface-neutral)`        | \-         |
| color/text/NEUTRAL/rest                 | Semantic   | `var(--dds-color-text-neutral-rest)`                 | \-         |
| button/background/ghost-rest            | Component  | `var(--dds-button-background-ghost-rest)`            | \-         |
| color/background/ERROR/subtle-hover     | Semantic   | `var(--dds-color-background-error-subtle-hover)`     | \#FFC3C9   |
| color/text/ERROR/hover                  | Semantic   | `var(--dds-color-text-error-hover)`                  | \#8C161F   |
| color/background/ERROR/subtle-pressed   | Semantic   | `var(--dds-color-background-error-subtle-pressed)`   | \#FF99A1   |
| color/text/ERROR/pressed                | Semantic   | `var(--dds-color-text-error-pressed)`                | \#590A0F   |
| color/text/ERROR/rest                   | Semantic   | `var(--dds-color-text-error-rest)`                   | \#BB2A33   |
| color/background/SUCCESS/subtle-hover   | Semantic   | `var(--dds-color-background-success-subtle-hover)`   | \#C0DD78   |
| color/text/SUCCESS/hover                | Semantic   | `var(--dds-color-text-success-hover)`                | \#2C5000   |
| color/background/SUCCESS/subtle-pressed | Semantic   | `var(--dds-color-background-success-subtle-pressed)` | \#9BC438   |
| color/text/SUCCESS/pressed              | Semantic   | `var(--dds-color-text-success-pressed)`              | \#193100   |
| color/text/SUCCESS/rest                 | Semantic   | `var(--dds-color-text-success-rest)`                 | \#436F00   |
| color/background/SURFACE/inactive       | Semantic   | `var(--dds-color-background-surface-inactive)`       | \#E1E1E1   |
| color/text/inactive                     | Semantic   | `var(--dds-color-text-inactive)`                     | \#B6B6B6   |
| color/background/BRAND/subtle-hover     | Semantic   | `var(--dds-color-background-brand-subtle-hover)`     | \#94DCF7   |
| color/text/BRAND/hover                  | Semantic   | `var(--dds-color-text-brand-hover)`                  | \#00468B   |
| color/background/BRAND/subtle-pressed   | Semantic   | `var(--dds-color-background-brand-subtle-pressed)`   | \#5CC1EE   |
| color/text/BRAND/pressed                | Semantic   | `var(--dds-color-text-brand-pressed)`                | \#002A58   |
| color/text/BRAND/rest                   | Semantic   | `var(--dds-color-text-brand-rest)`                   | \#0063B8   |
| button/gap/sm                           | Component  | `var(--dds-button-gap-sm)`                           | \-         |
| button/padding-horizontal/sm            | Component  | `var(--dds-button-padding-horizontal-sm)`            | \-         |
| button/size/sm                          | Component  | `var(--dds-button-size-sm)`                          | \-         |
| icon/size/sm                            | Component  | `var(--dds-icon-size-sm)`                            | \-         |
| button/gap/md                           | Component  | `var(--dds-button-gap-md)`                           | \-         |
| button/padding-horizontal/md            | Component  | `var(--dds-button-padding-horizontal-md)`            | \-         |
| button/size/md                          | Component  | `var(--dds-button-size-md)`                          | \-         |
| icon/size/md                            | Component  | `var(--dds-icon-size-md)`                            | \-         |
| button/gap/lg                           | Component  | `var(--dds-button-gap-lg)`                           | \-         |
| button/padding-horizontal/lg            | Component  | `var(--dds-button-padding-horizontal-lg)`            | \-         |
| button/size/lg                          | Component  | `var(--dds-button-size-lg)`                          |            |
| color/border/NEUTRAL/base               | Semantic   | `var(--dds-color-border-neutral-base)`               | \#1D2C3B   |
| color/border/ERROR/base                 | Semantic   | `var(--dds-color-border-error-base)`                 | \#8C161F   |
| color/border/SUCCESS/base               | Semantic   | `var(--dds-color-border-success-base)`               | \#2C5000   |
| color/border/INACTIVE/base              | Semantic   | `var(--dds-color-border-inactive-base)`              | \#7E7E7E   |
| color/border/BRAND/base                 | Semantic   | `var(--dds-color-border-brand-base)`                 | \#00468B   |
| color/background/NEUTRAL/base-hover     | Semantic   | `var(--dds-color-background-neutral-base-hover)`     | \#1D2C3B   |
| color/text/neutral                      | Semantic   | `var(--dds-color-text-neutral)`                      | \#FFFFFF   |
| color/background/NEUTRAL/base-pressed   | Semantic   | `var(--dds-color-background-neutral-base-pressed)`   | \#141D28   |
| color/background/NEUTRAL/base-rest      | Semantic   | `var(--dds-color-background-neutral-base-rest)`      | \#293B4D   |
| color/background/ERROR/base-hover       | Semantic   | `var(--dds-color-background-error-base-hover)`       | \#BB2A33   |
| color/background/ERROR/base-pressed     | Semantic   | `var(--dds-color-background-error-base-pressed)`     | \#8C161F   |
| color/background/ERROR/base-rest        | Semantic   | `var(--dds-color-background-error-base-rest)`        | \#D0353F   |
| color/background/SUCCESS/base-hover     | Semantic   | `var(--dds-color-background-success-base-hover)`     | \#436F00   |
| color/background/SUCCESS/base-pressed   | Semantic   | `var(--dds-color-background-success-base-pressed)`   | \#2C5000   |
| color/background/SUCCESS/base-rest      | Semantic   | `var(--dds-color-background-success-base-rest)`      | \#4F7D00   |
| color/background/BRAND/base-hover       | Semantic   | `var(--dds-color-background-brand-base-hover)`       | \#0063B8   |
| color/background/BRAND/base-pressed     | Semantic   | `var(--dds-color-background-brand-base-pressed)`     | \#00468B   |
| color/background/BRAND/base-rest        | Semantic   | `var(--dds-color-background-brand-base-rest)`        | \#0672CB   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-button--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-button--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-button--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-button--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-button--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-button--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Buttons are used to initiate actions within an application, website, or other digital experience. 