menu
searchType anywhere to search
logo

buttons

Buttons made uniquely for dashboards and app UI.

Use these buttons and instantly get an app or os like feeling on your project.

Have an Improvement? or a suggestion?
Goto request box

Types
Types of buttons for everything and anywhere.

Pages UI has four types of buttons that come with all types of sizes and purposes.
You can use these alternatively with just adding classes to create awareness of user actions and controls.

Text Button

Text buttons are typically used for less important actions. Used mainly as links in a page

Low emphasis

Outlined Button

Outlined buttons are used for more emphasis than text buttons due to the stroke.

Medium emphasis

Contained Button

Contained buttons have more emphasis, as they use a contrasted color fill.

High emphasis

Button Groups

Buttons group a set of actions using layout and spacing. They’re used less often.

Often

Button Color

Distinct. Consistent. Intentional. Colorful.

An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Color can help you achieve this efficiently.


Pages Color Matrix

See how pages color system adapts different states and...

Related Link

Primary Button

Refer to class btn-primary to get "Primary" button styles

Complete Button


Refer to class btn-complete to get "Complete" button styles.

Success Button


Refer to class btn-success to get "Success" button styles.

Danger Button


Refer to class btn-danger to get "Danger" button styles.

Warning Button


Refer to class btn-warning to get "Warning" button styles

White Button


Refer to class btn-default to get "Default" button styles

Size Options
Fancy larger or smaller buttons?
We made it fit anywhere.

Button sizes are a crucial part of dashboard designs. Use these size variations alternatively across space to get the desired action.


Size variation

Fancy larger or smaller buttons? Add .btn-lg .btn-sm .btn-xs for additional sizes.




Toggle Variations

Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens





Button Animations

A button can animate to show hidden content

The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
btn-animated and direction as from-left or from-top

Button Blocks

Extended button blocks with icons. Add class btn-block and btn-icon-left or btn-icon-right for direction

Different Styles
Traditional Dropdowns

We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them, this helps to improve usability.






The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

Tags and chips

Tags and Chips are compact elements that represent an input, attribute, or action.






Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Rounded Buttons

A button can be circular:






Circular buttons are a special type of promoted action. It Specifies a different action or a style.

Grouped Buttons
Single Button Group

Basic example of bootstrap button groups. Wrap a series of buttons with btn in btn-group




Button toolbar

A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page


Size Options

Similar to buttons, you can also use different sizes to button groups.


Size Options

Go wild! mix it and make it interesting, add different groups with dropdowns


Vertical Button Group

Want it in a different perspective? the button groups are built to work both vertical and horizontal ways


Button Group alternative

Make it look like an app Bottom navigation bar!.


Common Icon Buttons

Buttons can be filled with an extra component like an icon. You can place it either on the left or the right whichever you want with different color options



Social Icon Buttons

Fancy social icons? here are some of pre-made icons and buttons that are done which can come in handy


close
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
21st april 2020 2:13am

Press enter to search

suggestions :

Pages Search Results:

ice cream on pages

via john smith

T
ice cream related topics

via pages

M
ice cream music

via pagesmix

facebook
ice cream on facebook

via facebook

twitter
Tweats on ice cream

via twitter

google_plus
Circles on ice cream

via google plus