Tabler Tabler
  • Source code
  • Leesa Beaty Administrator
    Profile Settings Inbox 6 Message
    Need help? Sign out
  • Dashboard
  • Form elements
  • Error pages
    400 page 401 page 403 page 404 page 500 page 503 page Maintenance page
  • Base
    Buttons Cards Calendar Users Gallery
  • Charts
  • Layouts
  • Extra
    Invoice
  • Documentation
    index Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Progress Ribbons Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

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

Social colors

Facebook
Twitter
Google
Youtube
Vimeo
Dribbble
Github
Instagram
Pinterest
VK
RSS
Flickr
Bitbucker
Tabler