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

<TIconButton
  icon="mdi:account"
  href="https://dija.sa" //
/>

Text

<TIconButton
  icon="mdi:account"
  design="text"
  color="primary"
  size="xl"
  elevated
  circle //
/>

Raised

<TIconButton
  icon="mdi:account"
  design="raised"
  color="secondary"
  size="lg"
  elevated
  circle //
/>

Flat

<TIconButton
  icon="mdi:account"
  design="flat"
  color="success"
  size="md"
  rounded //
/>

Outlined

<TIconButton
  icon="mdi:account"
  design="outlined"
  color="danger"
  size="sm" //
/>

White Color

Use the white color variant.

Text

Flat

Outlined

Raised

<TIconButton
  icon="mdi:account-circle"
  design="raised"
  color="white"
  text-color="danger" //
/>

Surface Color

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

Text

Flat

Outlined

Raised

<TIconButton
  icon="mdi:account-circle"
  design="raised"
  color="surface" //
/>

Loading and Disabled State

Default

Loading

Disabled

Loading & Disabled

<TIconButton
  icon="mdi:account"
  design="raised"
  loading
  disabled //
/>

Custom Class Colors

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

Text

Flat

Outlined

Raised

<TIconButton
    icon="mdi:cloud-download"
    design="text"
    color="custom"
    class="bg-sky-200/0 text-sky-500 hover:bg-sky-200/35"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="flat"
    color="custom"
    class="bg-sky-200/35 text-sky-500 hover:bg-sky-200/75"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="outlined"
    color="custom"
    class="bg-sky-200/0 text-sky-500 border-sky-200 hover:bg-sky-200/25"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="raised"
    color="custom"
    class="bg-sky-500 hover:bg-sky-600"
    size="lg"
/>

Custom Hex Colors

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

Text

Flat

Outlined

Raised

<TIconButton
    icon="mdi:cloud-download"
    design="text"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/0 hover:bg-hex-e94177/15"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="flat"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/15 hover:bg-hex-e94177/25"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="outlined"
    color="custom"
    class="text-hex-e94177 bg-hex-e94177/0 border-hex-e94177/25 hover:bg-hex-e94177/25"
/>
<TIconButton
    icon="mdi:cloud-download"
    design="raised"
    color="custom"
    class="bg-hex-e94177 hover:bg-hex-df2661"
    size="lg"
/>

Icon Slot

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.

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" />;
      }
      return <TIcon icon="mdi:plus-circle-multiple-outline" />;
    };

    return () => (
      <TIconButton
        design="flat"
        color="primary"
        size="xl"
        icon={renderIcon}
        disabled={loading.value}
        onClick={onToggle}
        rounded
      />
    );
  },
});

HTML Rendering

As a Button

As a Route Link

As an External Link

As a Badge

<TIconButton
    icon="mdi:account"
    onClick={() => {}}
/>
<TIconButton
    icon="mdi:account"
    to={{ name: 'home' }}
/>
<TIconButton
    icon="mdi:account"
    href="https://dija.sa"
    external
/>
<TIconButton
    icon="mdi:account"
/>

API

No options available

Buttons

t-button

Icons

t-icon

Table of Contents