Skip to main content
🏠ComponentsButtonVersion: 2.0.0-beta.6

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:

Storybook icon
<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

PropertyTypeDefaultDescription
classesstringList 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.
disabledbooleanfalseIf true, the component is disabled
labelstringText inside button element
leftIconstring | { 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
propsstring | { [key: string]: string; }Attributes applied to the button element.
rightIconstring | { 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
EventTypeDescription
onClickEventCustomEvent<void>Callback fired when the button is clicked.