DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Button

Buttons are basic interface elements that initialize an action or function when the user interacts with them.

Overview
Code

Props

NameTypeDescriptionDefault
disabledbooleanIf true, the component will be disabled.false
iconstring | (React.ReactNode & React.SVGProps <SVGSVGElement>)Material Symbol name or SVG element as the icon that will be placed next to the label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_".-
iconPosition'before' | 'after'Whether the icon should appear after or before the label.'before'
labelstringText to be placed in the button.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
mode'primary' | 'secondary' | 'tertiary'The available button modes.'primary'
onClick() => voidThis function will be called when the user clicks the button.-
semantic'default' | 'error' | 'warning' | 'success' | 'info'Specifies the semantic meaning of the buttons, which determines its color.'default'
size{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }Object used to define the dimensions of the button in terms of height and width. { height: 'large'; width: 'fitContent' }
tabIndexnumberValue of the tabindex attribute.0
titlestringText representing advisory information related to the button's action. Under the hood, this prop also serves as an accessible label for the component.-
type'button' | 'reset' | 'submit'Sets the type attribute of the HTML button element. See MDN for further information.'button'

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcButton label="Submit" />
    </DxcInset>
  );
}

Icons

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-l)">
        <DxcButton icon="volunteer_activism" label="Donate" />
        <DxcButton icon="filled_volunteer_activism" mode="secondary" title="Donate" />
      </DxcFlex>
    </DxcInset>
  );
}

Semantic

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-l)">
        <DxcButton label="Search" />
        <DxcButton semantic="error" label="Cancel" />
        <DxcButton semantic="warning" label="Report" />
        <DxcButton semantic="success" label="Confirm" />
        <DxcButton semantic="info" label="Details" />
      </DxcFlex>
    </DxcInset>
  );
}

Size

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
    <DxcFlex gap="var(--spacing-gap-l)" direction="column">
        <DxcFlex gap="var(--spacing-gap-l)">
          <DxcButton icon="person" semantic="default" size={{ height: "small", width: "small" }} />
          <DxcButton label="Submit" size={{ height: "small", width: "medium" }} />
          <DxcButton label="Search" icon="search" size={{ height: "small", width: "large" }} />
          <DxcButton label="Edit" size={{ height: "small", width: "fitContent" }} />
          <DxcButton label="Learn more" size={{ height: "small", width: "fillParent" }} />
        </DxcFlex>
        <DxcFlex gap="var(--spacing-gap-l)">
          <DxcButton icon="person" semantic="default" size={{ height: "medium", width: "small" }} />
          <DxcButton label="Submit" size={{ height: "medium", width: "medium" }} />
          <DxcButton label="Search" icon="search" size={{ height: "medium", width: "large" }} />
          <DxcButton label="Edit" size={{ height: "medium", width: "fitContent" }} />
          <DxcButton label="Learn more" size={{ height: "medium", width: "fillParent" }} />
        </DxcFlex>
        <DxcFlex gap="var(--spacing-gap-l)">
          <DxcButton icon="person" semantic="default" size={{ height: "large", width: "small"}} />
          <DxcButton label="Submit" size={{ height: "large", width: "medium" }} />
          <DxcButton label="Search" icon="search" size={{ height: "large", width: "large" }} />
          <DxcButton label="Edit" size={{ height: "large", width: "fitContent" }} />
          <DxcButton label="Learn more" size={{ height: "large", width: "fillParent" }} />
        </DxcFlex>
      </DxcFlex>
    </DxcInset>
  );
}
On this page