Tabler Tabler
Navigation
  • Home
  • Form elements
  • Base
    • Empty page
    • Blank page
    • Buttons
    • Cards
    • Dropdowns
    • Modals
    • Maps
    • Vector maps
    • Charts
    • Tables
    • Calendar
    • Carousel
    • Lists
    • Authentication
      Sign in Sign up Forgot password Terms of service
    • Error pages
      400 page 401 page 403 page 404 page 500 page 503 page Maintenance page
  • Extra
    • Invoice
    • Blog cards
    • Snippets
    • Search results
    • Pricing cards
    • Users
    • Gallery
    • Profile
    • Music
  • Docs
    • Introduction
    • Alerts
    • Autosize
    • Avatars
    • Badges
    • Breadcrumb
    • Buttons
    • Cards
    • Carousel
    • Colors
    • Countup
    • Cursors
    • Charts
    • Dropdowns
    • Divider
    • Empty states
    • Flags
    • Form elements
    • Form helpers
    • Form input mask
    • Modals
    • Progress
    • Payments
    • Range slider
    • Ribbons
    • Spinners
    • Steps
    • Tables
    • Tabs
    • Timelines
    • Toasts
    • Tooltips
    • Typography
  • Customize
Tools
Customize
Tabler Tabler
  • Action Another action
    Separated link
  • English
    German Polish Japan Russian
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
  • Paweł Kuna
    Founder
    Action Another action
    Separated link

Buttons

Standard Buttons

Normal
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Link
Active state
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Link
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Link

Outline Buttons

Use .btn-outline-* class for outline buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Active state
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark

Ghost Buttons

Use .btn-ghost-* class for ghost buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Active state
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark

Square Buttons

Use .btn-square class for square buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark

Pill Buttons

Use .btn-pill class for pill buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark

Extra colors

Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
Gray

Icon buttons

Social colors

Facebook
Twitter
Google
Youtube
Vimeo
Dribbble
Github
Instagram
Pinterest
VK
RSS
Flickr
Bitbucker
Tabler
  • Documentation
  • FAQ
  • Source code
Copyright © 2020 Tabler. All rights reserved.
Customize Tabler

Set preferences that will be saved for your live preview.

Light or dark presentation.
You can use the .theme-dark-auto class to automatically adjust the color version to the system settings.
Choose where the main navigation in your project should be located.
Standard sidebar width or narrow version with icons only.
Choose whether the sidebar should appear on the left or on the right.
Light or dark version of the sidebar