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

<qtm-button variant="filled" color="primary">
  Filled action
</qtm-button>

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

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

Outline button

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

Outline action

<qtm-button variant="outline" color="primary">
  Outline action
</qtm-button>

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

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

Ghost button

Ghost buttons are for miscellaneous actions on any page.

Ghost action

<qtm-button variant="ghost" color="primary">
  Ghost action
</qtm-button>

Color

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

Primary Ghost action

<qtm-button variant="ghost" color="primary">
  Primary Ghost action
</qtm-button>

Neutral Ghost action

<qtm-button variant="ghost" color="neutral">
  Neutral Ghost action
</qtm-button>

Inverted Ghost action

<qtm-button variant="ghost" color="inverted">
  Inverted Ghost action
</qtm-button>

Disable state

Filled action

Outline action

Primary Ghost action

Neutral Ghost action

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

Sizes

SmallMediumLargeXlarge

<qtm-button size="small">Small</qtm-button>
<qtm-button size="medium">Medium</qtm-button>
<qtm-button size="large">Large</qtm-button>
<qtm-button size="xlarge">Xlarge</qtm-button>

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.

<qtm-button variant="primary" label="Primary"></qtm-button>
<qtm-button variant="outline" label="Outline"></qtm-button>
<qtm-button variant="ghost" label="Ghost"></qtm-button>

Props

You can apply any button attributes to qtm-button through props attribute.

app.vue

<script setup>
  import { ref } from 'vue';
  const props = { form: "form-id", formaction: "/submit", formmethod: "get" }
</script>

<template>
  <qtm-button label="Button with props" :props="props"></qtm-button>
</template>

Icons

Left icon

With icon properties

With Slot

Button

<qtm-button label="Button" left-icon="account_circle"></qtm-button>
<qtm-button>
  <qtm-icon icon="account_circle"></qtm-icon>
  <qtm-typography>Button</qtm-typography>
</qtm-button>

Right icon

With icon properties

With Slot

Button

<qtm-button label="Button" right-icon="east"></qtm-button>
<qtm-button>
  <qtm-typography>Button</qtm-typography>
  <qtm-icon icon="east"></qtm-icon>
</qtm-button>

Icon button

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

<qtm-button>
  <qtm-icon icon="account_circle"></qtm-icon>
</qtm-button>

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

<qtm-button variant="ghost">
  <storybook-icon width="24" height="24" />
</qtm-button>

Custom icon

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

The left-icon and right-icon 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 Slot

Button

const icon={icon: 'applied_settings', lib:"business"}

<qtm-button label="Button" :leftIcon="icon"></qtm-button>

<qtm-button>
  <qtm-typography>Button</qtm-typography>
  <qtm-icon icon="applied_settings" lib="business"></qtm-icon>
</qtm-button>

API

qtm-button

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
click-event	CustomEvent<void>	Callback fired when the button is clicked.