Buttons

Basic

Add an icon to the left, the right, or drop the label for an icon-only button.

Shapes

Round the corners with .btn-pill, or square them off with .btn-square.

Default Pill Square

Action buttons

Compact, icon-only buttons for card headers and toolbars.

Sizes

Scale a button from btn-sm to btn-xl without changing its icon layout.

Animated icon

Small hover animations draw attention to the icon.

Save Add Notifications Settings Love Close Confirm Next Previous

Standard

Fill a button with a theme color to mark its purpose.

Primary Secondary Success Warning Danger Info Dark Light

Outline

Keep the border colored and the background transparent for a subtler action.

Primary Secondary Success Warning Danger Info Dark Light

Ghost

Drop the border too — color appears only on hover.

Primary Secondary Success Warning Danger Info Dark Light

Pill

Combine .btn-pill with a theme color.

Primary Secondary Success Warning Danger Info Dark Light

Square

Combine .btn-square with a theme color.

Primary Secondary Success Warning Danger Info Dark Light

Extra colors

The full Tabler palette, beyond the eight theme colors.

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

Social colors

Brand colors for linking out to social networks.

Facebook Twitter X Linkedin Google Youtube Vimeo Dribbble Github Instagram Pinterest VK RSS Flickr Bitbucket Tabler

Icon buttons

Social brand colors without a label, for compact toolbars.

Basic

Shapes

Action buttons

Sizes

Animated icon

Standard

Outline

Ghost

Pill

Square

Extra colors

Social colors

Icon buttons

Make Tabler your own

Appearance

Layout