t-button

This component provides various visual options and can be used on any UI surface with the right configuration based on color, style, and size.

Basic Usage

Visit Site
<TButton href="https://dija.sa">Visit Site</TButton>

Text

<TButton
  icon="mdi:account"
  href="https://dija.sa"
  design="text"
  color="primary"
  size="xl"
  elevated
  circle //
>
  Visit Site
</TButton>

Raised

<TButton
  icon="mdi:account"
  href="https://dija.sa"
  design="raised"
  color="danger"
  size="lg"
  elevated
  circle //
>
  Visit Site
</TButton>

Flat

<TButton
  icon="mdi:account"
  href="https://dija.sa"
  design="flat"
  color="success"
  size="md"
  rounded //
>
  Join our Team
</TButton>

Outlined

<TButton
  icon="mdi:account"
  href="https://dija.sa"
  design="outlined"
  color="alert"
  size="sm" //
>
  Join our Team
</TButton>

White Color

Use the white color variant.

Text

Flat

Outlined

Raised

<TButton
  icon="mdi:account-circle"
  design="raised"
  color="white"
  text-color="danger"
  size="lg"
  centered
  block //
>
  Confirm
</TButton>

Surface Color

Use surface colors to apply white/black color depending on the current theme.

Text

Flat

Outlined

Raised

<TButton
  icon="mdi:account-circle"
  design="raised"
  color="surface"
  size="lg"
  centered
  block //
>
  Confirm
</TButton>

Block, Centered and Icon Position

Centered

Icon at the Start

Icon at the End

<TButton
    icon="mdi:account-circle"
    design="raised"
    color="danger"
    centered
    block
>
    Confirm
</TButton>
<TButton
    icon="mdi:account-circle"
    design="raised"
    color="success"
    icon-position="start"
    block
>
    Confirm
</TButton>
<TButton
    icon="mdi:account-circle"
    design="raised"
    color="alert"
    icon-position="end"
    block
>
    Confirm
</TButton>

Loading and Disabled State

Default

Loading

Disabled

Loading & Disabled

<TButton
  icon="mdi:account-circle"
  design="raised"
  loading
  disabled //
>
  Confirm
</TButton>

Custom Class Colors

Use any of UnoCSS's supported colors to generate the CSS utilities for texts, borders, and backgrounds.

Text

Flat

Outlined

Raised

<TButton
    design="text"
    color="custom"
    class="bg-sky-200/0 text-sky-500 hover:bg-sky-200/35"
>
    Download
</TButton>
<TButton
    design="flat"
    color="custom"
    class="bg-sky-200/35 text-sky-500 hover:bg-sky-200/75"
>
    Download
</TButton>
<TButton
    design="outlined"
    color="custom"
    class="bg-sky-200/0 text-sky-500 border-sky-200 hover:bg-sky-200/25"
>
    Download
</TButton>
<TButton
    design="raised"
    color="custom"
    class="bg-sky-500 hover:bg-sky-600"
>
    Download
</TButton>

Custom Hex Colors

Use UnoCSS value auto-infer to generate the CSS utilities automatically.

Text

Flat

Outlined

Raised

<TButton
    design="text"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/0 hover:bg-hex-e94177/15"
>
    Download
</TButton>
<TButton
    design="flat"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/15 hover:bg-hex-e94177/25"
>
    Download
</TButton>
<TButton
    design="outlined"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/0 border-hex-e94177/25 hover:bg-hex-e94177/25"
>
    Download
</TButton>
<TButton
    design="raised"
    color="custom"
    class="bg-hex-e94177 hover:bg-hex-df2661"
>
    Download
</TButton>

Icon, Prepend and Append Slots

The icon property accepts an icon name, SVG path, or custom component alias. It also accepts a function that returns a custom component.

Learn more about t-icon.

You can also pass prepend and append properties which are added before and after the button text.

Click to Toggle

export default defineComponent({
  setup() {
    const loading = ref(false);

    const onToggle = () => {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    };

    const renderIcon = () => {
      if (loading.value) {
        return <TLoading color="success" dimensions="24" width="3" me="sm" />;
      }
      return <TIcon icon="mdi:plus-circle-multiple-outline" me="sm" />;
    };

    const renderPrepend = () => {
      return <TIcon class="opacity-25" size="38" icon="mdi:cloud-outline" me="xl" />;
    };

    const renderAppend = () => {
      return (
        <TButton design="raised" size="sm" disabled={loading.value} ms>
          4 Files
        </TButton>
      );
    };

    return () => (
      <TButton
        design="flat"
        color="primary"
        size="xl"
        icon-position="end"
        disabled={loading.value}
        icon={renderIcon}
        prepend={renderPrepend}
        append={renderAppend}
        onClick={onToggle}
        block
      >
        <TText class="flex-1" weight="normal">
          Upload
        </TText>
      </TButton>
    );
  },
});

HTML Rendering

As a Route Link
As an External Link
As a Badge
<TButton
    onClick={() => {}}
>
    As a Button
</TButton>
<TButton
    to={{ name: 'home' }}
>
    As a Route Link
</TButton>
<TButton
    href="https://dija.sa"
    external
>
    As an External Link
</TButton>
<TButton>
    As a Badge
</TButton>

API

No options available

Layout

t-grid

Buttons

t-icon-button

Table of Contents