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.

Filled action

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

Color

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

Primary Filled action

Success Filled action

Warning Filled action

Danger Filled action

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

Outline button

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

Outline action

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

Color

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

Primary Outline action

Neutral Outline action

Success Outline action

Warning Outline action

Danger Outline action

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

Ghost button

Ghost buttons are for miscellaneous actions on any page.

Ghost action

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

Color

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

Primary Ghost action

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

Neutral Ghost action

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

Inverted Ghost action

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

Disable state

Filled action

Outline action

Primary Ghost action

Neutral Ghost action

<QtmButton variant="filled" color="primary" disabled> Filled action </QtmButton>
<QtmButton variant="outline" color="primary" disabled>
  Outline action
</QtmButton>
<QtmButton variant="ghost" color="primary" disabled>
  Primary Ghost action
</QtmButton>
<QtmButton variant="ghost" color="neutral" disabled>
  Neutral Ghost action
</QtmButton>

Sizes

SmallMediumLargeXlarge

<QtmButton size="small">Small</QtmButton>
<QtmButton size="medium">Medium</QtmButton>
<QtmButton size="large">Large</QtmButton>
<QtmButton size="xlarge">Xlarge</QtmButton>

Type

There are three types of buttons: submit, button and reset. By default, a button component has type="submit"

Label

Button components can have text added either between the button tags or through the label attribute.

<QtmButton variant="primary" label="Primary"></QtmButton>
<QtmButton variant="outline" label="Outline"></QtmButton>
<QtmButton variant="ghost" label="Ghost"></QtmButton>

Props

You can apply any button attributes to QtmButton through props attribute.

<QtmButton
  label="Button with props"
  props={{ form: 'form-id', formaction: '/submit', formmethod: 'get' }}
/>

Icons

Left icon

With icon properties

With Children

Button

<QtmButton label="Button" leftIcon="account_circle"></QtmButton>
<QtmButton>
  <QtmIcon icon="account_circle"></QtmIcon>
  <QtmTypography>Button</QtmTypography>
</QtmButton>

Right icon

With icon properties

With Children

Button

<QtmButton label="Button" rightIcon="east"></QtmButton>
<QtmButton>
  <QtmTypography>Button</QtmTypography>
  <QtmIcon icon="east"></QtmIcon>
</QtmButton>

Icon button

You can wrap any QtmIcon with QtmButton to generaet an icon button:

<QtmButton>
  <QtmIcon icon="account_circle"></QtmIcon>
</QtmButton>

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

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

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

<QtmButton leftIcon={{ icon: 'applied_settings', lib: 'business' }} label="Button"></QtmButton>
<QtmButton>
  <QtmIcon icon="applied_settings" lib="business"></QtmIcon>
  <QtmTypography>Button</QtmTypography>
</QtmButton>

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.