Button

TkButton is an extension to standard input element with icons and theming.

React

import { TkButton } from '@takeoff-ui/react'

Vue

import { TkButton } from '@takeoff-ui/vue'

Angular

import { TkButton } from '@takeoff-ui/angular'

Playground

Preview

Generated Code

<TkButton
  variant="primary"
  size="base"
  type="filled"
  mode="button"
  iconPosition="left"
  label="Hello World!"
/>

<TkButton
  variant="primary"
  size="base"
  type="filled"
  mode="button"
  iconPosition="left"
  label="Hello World!"
/>

<tk-button
  variant="primary"
  size="base"
  type="filled"
  mode="button"
  iconPosition="left"
  label="Hello World!"
/>

Controls

Variant:

Size:

Type:

Mode:

Icon Position:

Icon:

Label:

Href:

Target:

Variant

The variant of the badge for styling.

View Code

React

<div style={{ marginBottom: "16px", display: "flex", gap: "8px" }}>
  <TkButton variant="primary" label="Primary" />
  <TkButton variant="secondary" label="Secondary" />
  <TkButton variant="neutral" label="Neutral" />
  <TkButton variant="info" label="Info" />
  <TkButton variant="success" label="Success" />
  <TkButton variant="danger" label="Danger" />
  <TkButton variant="warning" label="Warning" />
</div>

Vue

<div style='margin-bottom: 16px; display: flex; gap: 8px;'>
  <TkButton variant="primary" label="Primary" />
  <TkButton variant="secondary" label="Secondary" />
  <TkButton variant="neutral" label="Neutral" />
  <TkButton variant="info" label="Info" />
  <TkButton variant="success" label="Success" />
  <TkButton variant="danger" label="Danger" />
  <TkButton variant="warning" label="Warning" />
</div>

Angular

<div style="margin-bottom: 16px; display: flex; gap: 8px">
  <tk-button variant="primary" label="Primary" />
  <tk-button variant="secondary" label="Secondary" />
  <tk-button variant="neutral" label="Neutral" />
  <tk-button variant="info" label="Info" />
  <tk-button variant="success" label="Success" />
  <tk-button variant="danger" label="Danger" />
  <tk-button variant="warning" label="Warning" />
</div>

Type

This prop specifies the design type of the component. "filled", "outlined", "text" designs are available.

View Code

React

<TkButton variant="primary" label="Primary" type="filled" />
<TkButton variant="primary" label="Primary" type="outlined" />
<TkButton variant="primary" label="Primary" type="text" />

Vue

<TkButton variant="primary" label="Primary" type="filled" />
<TkButton variant="primary" label="Primary" type="outlined" />
<TkButton variant="primary" label="Primary" type="text" />

Angular

<tk-button variant="primary" label="Primary" type="filled" />
<tk-button variant="primary" label="Primary" type="outlined" />
<tk-button variant="primary" label="Primary" type="text" />

Full Width

Sets the button width to full width.

View Code

React

<TkButton variant="primary" label="Full Width Button" fullWidth />

Vue

<TkButton variant="primary" label="Full Width Button" fullWidth />

Angular

<tk-button variant="primary" label="Full Width Button" fullWidth />

Size

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code

React

<TkButton variant="primary" size="small" label="small button" />
<TkButton variant="primary" size="base" label="base button" />
<TkButton variant="primary" size="large" label="large button" />

Vue

<TkButton variant="primary" size="small" label="small button" />
<TkButton variant="primary" size="base" label="base button" />
<TkButton variant="primary" size="large" label="large button" />

Angular

<tk-button variant="primary" size="small" label="small button" />
<tk-button variant="primary" size="base" label="base button" />
<tk-button variant="primary" size="large" label="large button" />

Icon

It can be used with icons. You can also specify the icon direction. You should use Material Symbols icons.

View Code

React

<TkButton
  variant="primary"
  size="large"
  icon="flight"
  label="left icon"
/>
<TkButton
  variant="primary"
  size="large"
  icon="flight"
  iconPosition="right"
  label="right icon"
/>
<TkButton
  variant="primary"
  size="large"
  label="multiple icons"
  icon={{
    left: { name: 'key', color: 'pink' },
    right: { name: 'check_circle', color: 'pink', fill: true }
  }}
/>

Vue

<TkButton
  variant="primary"
  size="large"
  icon="flight"
  label="left icon"
/>
<TkButton
  variant="primary"
  size="large"
  icon="flight"
  iconPosition="right"
  label="right icon"
/>
<TkButton
  variant="primary"
  size="large"
  label="multiple icons"
  :icon="{ left: { name: 'key', color: 'pink' }, right: { name: 'check_circle', color: 'pink', fill: true } }"
/>

Angular

<tk-button
  variant="primary"
  size="large"
  icon="flight"
  label="left icon"
/>
<tk-button
  variant="primary"
  size="large"
  icon="flight"
  iconPosition="right"
  label="right icon"
/>
<tk-button
  variant="primary"
  size="large"
  label="multiple icons"
  [icon]="{ left: { name: 'key', color: 'pink' }, right: { name: 'check_circle', color: 'pink', fill: true } }"
></tk-button>

API

Props

Name	Type	Default	Description
	boolean	null	Disables the button, preventing user interaction.
	boolean	null	Sets the button to full-width mode, making it span the container.
	string	null	Sets the URL the button should navigate to when clicked (for type="link" buttons).
	IIconOptions, IMultiIconOptions, string	null	Specifies a material icon name to be displayed.
	"left", "right"	'left'	Defines the position of the icon.
	string	''	Label text displayed inside the button.
	boolean	null	Shows a loading icon inside the button.
	"button", "link", "reset", "submit"	'button'	Sets the button type.
	boolean	null	Makes the button round with an icon-only style.
	"base", "large", "small"	'base'	Sets size for the component.
	string	null	Specifies where to open the linked document (for type="link" buttons).
	"elevated", "filled", "outlined", "text"	'filled'	This field specifies the design type of the component.
	boolean	null	Applies underline styling to the button (for type="link" buttons).
	"danger", "info", "neutral", "primary", "secondary", "success", "warning", "white"	'primary'	Determines the button's variant for different styles.

Events

Name	Description
tk-click	Emitted when the button click.