Color System

Tabler-Vue fully inherits the Tabler CSS color system. All components provide color support through a unified TablerColor type.

Color Type Hierarchy

// 12 Base Colors (BaseColor)
type BaseColor =
    | 'blue' | 'azure' | 'indigo' | 'purple' | 'pink' | 'red'
    | 'orange' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan'

// 6 Status Colors (StatusColor)
type StatusColor =
    | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'

// 3 Neutral Colors (NeutralColor)
type NeutralColor = 'dark' | 'light' | 'muted'

// Full type for component color prop, including white and -lt light variants
type TablerColor =
    | BaseColor | StatusColor | NeutralColor
    | 'default' | 'white'
    | `${BaseColor}-lt` | `${StatusColor}-lt` | `${NeutralColor}-lt`

All component color props follow the TablerColor type constraint.

---

Base Colors

Tabler provides a 12-color palette from blue to cyan, covering common brand color spaces.

Applying base colors to components:

View code

<TBadge color="blue">blue</TBadge>
<TBadge color="azure">azure</TBadge>
<TBadge color="indigo">indigo</TBadge>
<TBadge color="purple">purple</TBadge>
<TBadge color="pink">pink</TBadge>
<TBadge color="red">red</TBadge>
<TBadge color="orange">orange</TBadge>
<TBadge color="yellow">yellow</TBadge>
<TBadge color="lime">lime</TBadge>
<TBadge color="green">green</TBadge>
<TBadge color="teal">teal</TBadge>
<TBadge color="cyan">cyan</TBadge>

---

Status Colors

Used to convey operation results or system state (success, danger, warning, etc.).

<TBadge color="primary">Primary</TBadge>
<TBadge color="secondary">Secondary</TBadge>
<TBadge color="success">Success</TBadge>
<TBadge color="danger">Danger</TBadge>
<TBadge color="warning">Warning</TBadge>
<TBadge color="info">Info</TBadge>

---

Neutral Colors

Three neutral colors — dark, light, muted — used for auxiliary visual hierarchy.

---

Light Tints

All colors have a -lt light tint variant, suitable for scenarios requiring a softer color appearance.

View code

<TBadge color="primary-lt">primary-lt</TBadge>
<TBadge color="secondary-lt">secondary-lt</TBadge>
<TBadge color="success-lt">success-lt</TBadge>
<TBadge color="danger-lt">danger-lt</TBadge>
<TBadge color="warning-lt">warning-lt</TBadge>
<TBadge color="info-lt">info-lt</TBadge>
<TBadge color="blue-lt">blue-lt</TBadge>
<TBadge color="green-lt">green-lt</TBadge>
<TBadge color="purple-lt">purple-lt</TBadge>
<TBadge color="dark-lt">dark-lt</TBadge>
<TBadge color="muted-lt">muted-lt</TBadge>

---

Social Brand Colors

Tabler includes commonly used social brand colors, mainly for brand-related icon display.

Color name	CSS class example
x	bg-x text-x-fg
facebook	bg-facebook text-facebook-fg
twitter	bg-twitter text-twitter-fg
linkedin	bg-linkedin text-linkedin-fg
google	bg-google text-google-fg
youtube	bg-youtube text-youtube-fg
vimeo	bg-vimeo text-vimeo-fg
dribbble	bg-dribbble text-dribbble-fg
github	bg-github text-github-fg
instagram	bg-instagram text-instagram-fg
pinterest	bg-pinterest text-pinterest-fg
vk	bg-vk text-vk-fg
rss	bg-rss text-rss-fg
flickr	bg-flickr text-flickr-fg
bitbucket	bg-bitbucket text-bitbucket-fg
tabler	bg-tabler text-tabler-fg

---

Gray Scale

A complete gray scale from gray-50 to gray-950, used for backgrounds, borders, dividers, etc.

---

Using Colors in Components

Alert

<TAlert color="success" title="Success">
  Your data has been submitted successfully.
</TAlert>

<TAlert color="danger-lt" title="Error">
  Please check your input and try again.
</TAlert>

Button

<TButton color="primary">Submit</TButton>
<TButton color="green" outline>Green Outline</TButton>
<TButton color="red" ghost>Red Ghost</TButton>

Avatar

<TAvatar color="blue" initials="JD"/>
<TAvatar color="green-lt" initials="JW"/>

Progress

<TProgress color="success" :value="75"/>
<TProgress color="warning" :value="50"/>

Badge

<TBadge color="purple">Tag</TBadge>
<TBadge color="purple-lt">Light Tag</TBadge>

Card

<TCard bg="primary" textColor="primary-fg">
  Dark background card
</TCard>

---

Color API Reference

Type Reference

Type	Colors	Component Example
BaseColor	blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan	color="blue"
StatusColor	primary, secondary, success, danger, warning, info	color="success"
NeutralColor	dark, light, muted	color="muted"
-lt suffix	All of the above + -lt	color="green-lt"
white	white only	color="white"
default	Component default style (no color class applied)	color="default"