Skip to main content

Button

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

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

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​

The variant of the badge for styling.

View Code
<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>

Type​

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

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

Full Width​

Sets the button width to full width.

View Code
<TkButton 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
<TkButton variant="primary" size="small" label="small button" />
<TkButton variant="primary" size="base" label="base button" />
<TkButton 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
<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 }
  }}
/>

Mode​

The mode prop can be used to set the button's behavior. The available options are button, link, submit, and reset. The default value is button.

View Code
import { TkButton, TkInput } from '@takeoff-ui/react';
  import { showPersistentToast, IToast } from '@takeoff-ui/core';
  import React from 'react';
  
  const handleMultiplePersistent = (position: string, variant: string, id: string) => {
    showPersistentToast({
      persistentId: id,
      position: position,
      header: `${variant.toUpperCase()} Persistent Toast`,
      message: `Your form submitted successfully.`,
      variant: variant,
      type: 'filled',
      removable: true,
    });
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    handleMultiplePersistent('top-right', 'info', 'persistent-info');
  };
  
  const ExampleForm = (
    <form onSubmit={handleSubmit}>
      <div className="flex flex-col flex-wrap gap-2">
        <div className="flex flex-col gap-2">
          <TkInput label="Name" size="small" />
          <TkInput label="Surname" size="small" />
          <TkInput label="Password" mode="password" size="small" />
        </div>
        <div className="flex flex-row justify-center gap-8">
          <TkButton mode="reset" label="Reset" />
          <TkButton mode="submit" label="Submit" />
        </div>
      </div>
    </form>
  );
  
  return (
    <div className="flex flex-row items-center gap-4">
      <div className="basis-1/5">
        <TkButton mode="button" label="Button" />
      </div>
      <div className="basis-1/5">
        <TkButton 
          mode="link" 
          label="Link" 
          href="https://github.com/turkishtechnology/takeoff-ui" 
          target="_blank" 
        />
      </div>
      <div className="inline-block h-[250px] min-h-[1em] w-0.5 self-stretch bg-gray-300"></div>
      <div className="basis-3/5">{ExampleForm}</div>
    </div>
  );

API​

Props​

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

Events​

NameDescription
tk-clickEmitted when the button click.