Button

Buttons are the primary components for displaying actions on a page. They are often referenced as Call To Actions (CTA/C2A).

Filled button

Solid buttons are the main call to action on any page.

<Button variant="filled" color="primary">
  Filled action
</Button>

Color

Filled buttons are available in 4 colors: primary, success, warning and danger.

<Button variant="filled" color="primary">
  Primary
</Button>
<Button variant="filled" color="success">
  Success
</Button>
<Button variant="filled" color="warning">
  Warning
</Button>
<Button variant="filled" color="danger">
  Danger
</Button>

Outline button

Outline buttons are for secondary call to actions on any page.

<Button variant="outline" color="primary">
  Outline action
</Button>

Color

Outline buttons are available in 5 colors: primary, neutral, success, warning and danger.

<Button variant="outline" color="primary">
  Primary
</Button>
<Button variant="outline" color="neutral">
  Neutral
</Button>
<Button variant="outline" color="success">
  Success
</Button>
<Button variant="outline" color="warning">
  Warning
</Button>
<Button variant="outline" color="danger">
  Danger
</Button>

Ghost button

Ghost buttons are for tertiary call to actions on any page.

<Button variant="ghost" color="primary">
  Ghost action
</Button>

Color

Ghost buttons are available in three colors: primary, neutral and inverted.

<Button variant="ghost" color="primary">
  Primary Ghost action
</Button>

<Button variant="ghost" color="neutral">
  Neutral Ghost action
</Button>

<Button variant="ghost" color="inverted">
  Inverted Ghost action
</Button>

Sizes

Buttons are available in three sizes to cater for the diverse range of use cases and devices that our business uses.

<Button variant="filled" color="primary" size="small">
  Small
</Button>
<Button variant="filled" color="primary" size="medium">
  Medium
</Button>
<Button variant="filled" color="primary" size="large">
  Large
</Button>

Disabled

<Button variant="filled" disabled>
  Filled
</Button>
<Button variant="outline" disabled>
  Outline
</Button>
<Button variant="ghost" disabled>
  Ghost
</Button>

With icon

You can add icons to your buttons using the leftIcon or rightIcon properties, or by including Icon components as children.

With icon properties

With Children

<Button leftIcon={<Icon icon="settings" />} label="Button"></Button>
<Button>
  <Icon icon="settings" />
  <span>Button</span>
</Button>

Icon button

You can wrap any Icon with Button to generate an icon button:

<Button>
  <Icon icon="account_circle"></Icon>
</Button>

You can also import any icon that you need and wrap it with Button tag to adopt the styles and behavior:

<Button variant="ghost">
  <StorybookIcon width="24" height="24" />
</Button>

Custom icon

To select an appropriate icon, please consult the Icon component documentation.

The leftIcon and rightIcon can either be of string type or have one of the following type:

type IconType = {
  icon: string,
  classes?: string,
  lib?: IconLibType,
  size?: IconSizeType,
  variant?: IconVariantType,
};

With icon properties

With Children

<Button leftIcon={<Icon icon="applied_settings" lib="business" />} label="Button"></Button>
<Button>
  <Icon icon="applied_settings" lib="business"></Icon>
  <Typography>Button</Typography>
</Button>

Event handling

You can handle click events on buttons using the onClickEvent prop.

const handleClick = () => {
  console.log('Button clicked');
  // Add your click handling logic here
};

<Button 
  variant="filled" 
  color="primary"
  onClickEvent={handleClick}
>
  Click me
</Button>

API

QtmButton

Property	Type	Default	Description
classes	string		List of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"danger" | "inverted" | "neutral" | "primary" | "success" | "warning"	'primary'	The default color is primary. The filled button is available in 4 colors: primary, success, warning, danger. The ghost button is available in 3 colors: primary, neutral and inverted. The outline button is available in 5 colors: primary, neutral, success, warning, danger.
disabled	boolean	false	If true, the component is disabled
label	string		Text inside button element
leftIcon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		The name of the left icon. Besides, its value can have type IconType if this icon is customized
props	string | { [key: string]: string; }		Attributes applied to the button element.
rightIcon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		The name of the right icon. Besides, its value can have type IconType if this icon is customized
size	"large" | "medium" | "small" | "xlarge"	'medium'	The size of the button
type	"button" | "reset" | "submit"	'submit'	The type of the button
variant	"filled" | "ghost" | "outline"	'filled'	The variant to use

Event	Type	Description
onClickEvent	CustomEvent<void>	Callback fired when the button is clicked.