Button

The button component is the most fundamental interactive element in an interface. By flexibly configuring its color, shape, size, and state, it guides users to complete click operations and provides clear intent communication.

Basic Usage

Standard buttons feature a white background with a subtle shadow effect, suitable for secondary actions or general interactions on a page.

vue


<TButton>Link</TButton>

Semantic Variants

Using semantic colors via the color prop can quickly convey the functional intent of the button, helping users identify operational risks or importance.

vue


<TButton color="primary">Primary</TButton>
<TButton color="secondary">Secondary</TButton>
<TButton color="success">Success</TButton>
<TButton color="warning">Warning</TButton>
<TButton color="danger">Danger</TButton>
<TButton color="info">Info</TButton>
<TButton color="dark">Dark</TButton>
<TButton color="light">Light</TButton>

Disabled State

Setting the disabled prop gives the button an unavailable appearance. When business logic conditions are not met ( e.g., an incomplete form), the corresponding button should be disabled to prevent invalid interactions.

View Code

vue


<TButton color="primary" disabled>Primary</TButton>
<TButton color="secondary" disabled>Secondary</TButton>
<TButton color="success" disabled>Success</TButton>
<TButton color="warning" disabled>Warning</TButton>
<TButton color="danger" disabled>Danger</TButton>
<TButton color="info" disabled>Info</TButton>
<TButton color="dark" disabled>Dark</TButton>
<TButton color="light" disabled>Light</TButton>

Base Colors

In addition to semantic colors, the component also supports the standard Tabler color palette. A rich selection of colors helps the button remain harmonious and consistent with the overall design style.

View Code

vue


<TButton color="blue">Blue</TButton>
<TButton color="azure">Azure</TButton>
<TButton color="indigo">Indigo</TButton>
<TButton color="purple">Purple</TButton>
<TButton color="pink">Pink</TButton>
<TButton color="red">Red</TButton>
<TButton color="yellow">Yellow</TButton>
<TButton color="lime">Lime</TButton>
<TButton color="green">Green</TButton>
<TButton color="teal">Teal</TButton>
<TButton color="cyan">Cyan</TButton>

Ghost Buttons

Use the ghost prop to create buttons without a background border, revealing the background color only on hover. Suitable for toolbars or scenarios requiring minimal visual distraction.

View Code

vue


<TButtonList class="p-2">
  <TButton color="azure" ghost size="sm">Primary</TButton>
  <TButton color="secondary" ghost size="sm">Secondary</TButton>
  <TButton color="success" ghost size="sm">Success</TButton>
  <TButton color="warning" ghost size="sm">Warning</TButton>
  <TButton color="danger" ghost size="sm">Danger</TButton>
  <TButton color="info" ghost size="sm">Info</TButton>
  <TButton color="dark" ghost size="sm">Dark</TButton>
  <TButton color="light" ghost size="sm">Light</TButton>
</TButtonList>
<br/>
<TButtonList class="p-2 bg-dark">
  <TButton color="azure" ghost size="sm">Primary</TButton>
  <TButton color="secondary" ghost size="sm">Secondary</TButton>
  <TButton color="success" ghost size="sm">Success</TButton>
  <TButton color="warning" ghost size="sm">Warning</TButton>
  <TButton color="danger" ghost size="sm">Danger</TButton>
  <TButton color="info" ghost size="sm">Info</TButton>
  <TButton color="dark" ghost size="sm">Dark</TButton>
  <TButton color="light" ghost size="sm">Light</TButton>
</TButtonList>

Outline Buttons

The outline prop removes the solid background while retaining the theme color border. It is often used as a secondary button to ensure it doesn't overshadow the primary action.

View Code

vue


<TButton color="primary" outline>Primary</TButton>
<TButton color="secondary" outline>Secondary</TButton>
<TButton color="success" outline>Success</TButton>
<TButton color="warning" outline>Warning</TButton>
<TButton color="danger" outline>Danger</TButton>
<TButton color="info" outline>Info</TButton>
<TButton color="dark" outline>Dark</TButton>
<TButton color="light" outline>Light</TButton>

Square Buttons

If you prefer right angles instead of rounded corners for the button, use the square prop to remove the border radius.

vue


<TButton square>Square button</TButton>

Pill Buttons

Add the pill prop to the component to give it a fully rounded style, presenting a modern and appealing appearance.

vue


<TButton pill>Pill button</TButton>

Sizes

Provides multiple size options ranging from sm to xl. Reasonable size differences help guide the user's visual hierarchy in complex pages.

View Code

vue


<TButtonList>
  <TButton size="sm" color="primary">Small button</TButton>
  <TButton size="sm">Small button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton color="primary">Button</TButton>
  <TButton>Button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton size="lg" color="primary">Large button</TButton>
  <TButton size="lg">Large button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton size="xl" color="primary">Large button</TButton>
  <TButton size="xl">Large button</TButton>
</TButtonList>

Icon Combinations

Add a text label paired with an icon to a button to clearly convey the meaning of the action, making it easier for users to quickly recognize.

Icons are highly recognizable and can enhance the aesthetic of the button design, making it look more modern and appealing.

For all icons, please see: Tabler Icons.

It is recommended to add the .icon class to the icon for optimal vertical alignment.

View Code

vue


<TButtonList>
  <TButton>
    <IconUpload class="icon icon-1"></IconUpload>
    Upload
  </TButton>
  <TButton color="warning">
    <IconHeart class="icon icon-1"></IconHeart>
    I like
  </TButton>
  <TButton color="success">
    <IconCheck class="icon icon-1"></IconCheck>
    I agree
  </TButton>
  <TButton color="primary">
    <IconPlus class="icon icon-1"></IconPlus>
    More
  </TButton>
  <TButton color="danger">
    <IconLink class="icon icon-1"></IconLink>
    Link
  </TButton>
  <TButton color="info">
    <IconMessage class="icon icon-1"></IconMessage>
    Comment
  </TButton>
</TButtonList>

Icon Only Mode

Adding the iconOnly prop removes unnecessary padding from the button, making it a perfect square.

This not only saves space but also helps users quickly identify the action's meaning.

View Code

vue


<TButtonList>
  <TButton iconOnly>
    <IconUpload></IconUpload>
  </TButton>
  <TButton iconOnly color="warning">
    <IconHeart></IconHeart>
  </TButton>
  <TButton iconOnly color="success">
    <IconCheck></IconCheck>
  </TButton>
  <TButton iconOnly color="primary">
    <IconPlus></IconPlus>
  </TButton>
  <TButton iconOnly color="danger">
    <IconLink></IconLink>
  </TButton>
  <TButton iconOnly color="info">
    <IconMessage></IconMessage>
  </TButton>
</TButtonList>

Badges

Adding a badge to a button can be used to display additional information such as quantities, notifications, or status indicators.

Badges will automatically find their appropriate position within the button layout.

View Code

vue


<TButtonList>
  <TButton>
    Notifications
    <TBadge class="ms-2">14</TBadge>
  </TButton>
  <TButton>
    Messages
    <TBadge class="ms-2">3</TBadge>
  </TButton>
  <TButton>
    Alerts
    <TBadge class="ms-2">7</TBadge>
  </TButton>
</TButtonList>

Link Buttons

Use link to create a style that looks like a normal link but retains button functionality.

This type of button is perfect for secondary actions because it doesn't overpower and effectively avoids drawing attention away from primary buttons.

vue


<TButton link>Link button</TButton>
&nbsp;
<TButton link>Link button</TButton>

Furthermore, the component is deeply integrated with Vue Router.

Once routing is introduced in the project, you can easily implement internal application navigation by simply configuring the to prop.

vue


<TButton to="/dashboard" link>Dashboard</TButton>

Loading State Buttons

Adding the loading prop displays a spinner animation when triggering asynchronous operations and automatically disables the button to prevent duplicate clicks.

This way, users can clearly understand the progress of the current operation and won't give up halfway due to long wait times.

vue


<TButton color="primary" loading>
  Button
</TButton>
&nbsp;
<TButton color="primary" loading>
  Loading button with loooong content
</TButton>

Of course, you can also add <span class="spinner-border spinner-border-sm me-2"></span> in the default slot to achieve a simultaneous display of the spinner and button content.

vue


<TButton color="primary">
  <span class="spinner-border spinner-border-sm me-2"></span>
  Button
</TButton>

Responsive Full Width

Adding the full prop allows the button to expand to the full width of its container.

This design is very practical in mobile-first layouts, or whenever you want the button to occupy all available space.

vue


<TButton color="primary" full>
  Full width button
</TButton>
<br/>
<br/>
<TButton full outline>
  Full width outline button
</TButton>

Action Buttons

Use the action prop to create low-profile action buttons, perfect for card headers, toolbars, or other UI elements where you want to minimize visual distraction.

View Code

vue


<TButton action>
  <IconEdit class="icon icon-1"></IconEdit>
</TButton>
<TButton action>
  <IconCopy class="icon icon-1"></IconCopy>
</TButton>
<TButton action>
  <IconSettings class="icon icon-1"></IconSettings>
</TButton>
<TButton action>
  <IconTrash class="icon icon-1"></IconTrash>
</TButton>

API

TButton Props

Prop Name	Description	Type	Default
`color`	Button color. Supports semantic colors, standard colors, and `-lt` light variants.	`TablerColor`	`'default'`
`size`	Button size.	`sm`	`lg`
`pill`	Whether to apply the pill shape (fully rounded corners).	`boolean`	`false`
`square`	Whether to apply the square shape (right angles).	`boolean`	`false`
`outline`	Whether to use the outline style.	`boolean`	`false`
`ghost`	Whether to use the ghost style (background visible only on hover).	`boolean`	`false`
`link`	Whether to render as a link style.	`boolean`	`false`
`loading`	Whether the button is in a loading state.	`boolean`	`false`
`disabled`	Whether the button is disabled.	`boolean`	`false`
`full`	Whether to take up the full width of the parent container.	`boolean`	`false`
`iconOnly`	Whether it is an icon-only button.	`boolean`	`false`
`action`	Whether it is an action button style.	`boolean`	`false`
`href`	Native hyperlink. If set, it renders as an `<a>` tag.	`string`	`undefined`
`to`	Route navigation target. If set, it renders as a `<router-link>`.	`RouteLocationRaw`	`undefined`

TButton Slots

Slot Name	Description
`default`	The content inside the button.

Button ​

Basic Usage ​

Semantic Variants ​

Disabled State ​

Base Colors ​

Ghost Buttons ​

Outline Buttons ​

Square Buttons ​

Pill Buttons ​

Sizes ​

Icon Combinations ​

Icon Only Mode ​

Badges ​

Link Buttons ​

Loading State Buttons ​

Responsive Full Width ​

Action Buttons ​

API ​

TButton Props ​

TButton Slots ​

Button

Basic Usage

Semantic Variants

Disabled State

Base Colors

Ghost Buttons

Outline Buttons

Square Buttons

Pill Buttons

Sizes

Icon Combinations

Icon Only Mode

Badges

Link Buttons

Loading State Buttons

Responsive Full Width

Action Buttons

API

TButton Props

TButton Slots