Button

Ready

Buttons are basic interface elements that initialize an action or function when the user interacts with them. The appearance of the button should suggest the user takes an action that leads to different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to Action) components, which basically are designed to capture user attention and improve the user experience within the application.

Code

Usage

Specifications

Props

Name	Default	Description
mode: 'primary' \| 'secondary' \| 'text'	`'primary'`	The available button modes.
type: 'button' \| 'reset' \| 'submit'	`'button'`	'type' html prop of the button.
label: string		Text to be placed in the button.
icon: node \| string		Element or path used as the icon that will be placed next to the button label.
iconPosition: 'before' \| 'after'	`'before'`	Whether the icon should appear after or before the label.
disabled: boolean	`false`	If true, the component will be disabled.
onClick: function		This function will be called when the user clicks the button.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent').
tabIndex: number	0	Value of the tabindex attribute.

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcButton label="Button" />
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcButton label="Button" />
    </DxcInset>
  );
}

Icons

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcButton label="Button" icon={icon} />
    </DxcInset>
  );
}

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcButton label="Button" icon={icon} />
    </DxcInset>
  );
}

Edit this page on GitHub

Bulleted List

NextCard

Button

Props

Examples

Basic usage

Icons

Contents