Default buttons

Multiple Sizes

Block buttons

Active State

Loading State

Disabled State

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

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.

Inbox 42



Pagination

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


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



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.