Default buttons

Default Primary Success Info Warning Danger Link

Multiple Sizes

Large button Large button Large button Large button Large button Large button

Default button Default button Default button Default button Default button Default button

Small button Small button Small button Small button Small button Small button

Extra small button Extra small button Extra small button Extra small button Extra small button Extra small button

Block buttons

Active State

Primary button Button

Loading State

Load Refresh Save Alert Notify Remove

Disabled State

Button Primary button Success button Info button Warning button Danger button

Button Groups

Group related actions easily using button groups:

You can also arrange your button groups vertically:

Combine button groups together into a toolbar for more complex components:

Buttons with Icons

Add Edit Delete

Dropdown Buttons

Labels

Use the .label class from Bootstrap to highlight statuses and any other tags or labels you might need.

Default Primary Success Info Warning Danger

The ArkAdmin theme also provides you with a few additional classes to make your application look even more unique and showing intent using arrow heads. Check out the code bellow:

<span class="label label-default arrowed arrow-left">Arrow Left Out</span>
<span class="label label-default arrowed arrow-left-in">Arrow Left In</span>
<span class="label label-default arrowed arrow-right">Arrow Right Out</span>
<span class="label label-default arrowed arrow-right-in">Arrow Right In</span>

You can also have any combination of the above on the same label as illustrated below:

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

You can even use them within buttons to show a counter or a small label:

Some Action 34

Badges

Add a badge to any type of control element by simply adding this markup <span class="badge">42</span> inside your element.

Pagination

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

• «
• 1
• 2
• 3
• 4
• 5
• »

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

Optionally you can also use quick previous and next links for simple pagination implementations with light markup and styles.

Or aligned on the sides:

Pager links also use the general .disabled utility class from the pagination.