Buttons with Icons
These buttons examples contain icons with or without labels attached.
Buttons Options
Standard Pills Square Shadow With Icons
Solid P7 Icons
Outline Pill P7 Icons
Shadow Dashed P7 Icons
Linecons Icons Square Buttons
Outline 2x Shadow Linecons Icons
Solid Pills Linecons Icons
Block Level
Sizing
Right Icon
Icons Only
Solid P7 Icons
Color Transition P7 Icons
Outline P7 Icons
Shadow Dashed P7 Icons
Block Level
Sizing
Bottom Icon
Grid Menu Bigger
Linecons Icons Square Buttons
Linecons Transition Buttons without Borders
Outline 2x Shadow Linecons Icons
Solid Pills Linecons Icons
Grid Menu Hover Color
Grid Menu Two Columns
Grid Menu Bigger Two Columns

Layout Options

  • Fixed Footer
    Makes the app footer bottom fixed, always visible!
  • Fluid Containers
    Makes the app layout full width instead on container boxed!
  • Pills Page Navigation Style
    Changes the page sub navigation style to pills!

Header Options

  • Choose Color Scheme

Top Bar Options

  • Choose Color Scheme

Main Content Options

  • Color Schemes

Servers Status

Server Load 1

Server Load 2

Server Load 3

Live Statistics
43
Packages
65
Dropped
18
Invalid

File Transfers

  • TPSReport.docx
  • Latest_photos.zip
  • Annual Revenue.pdf
  • Analytics_GrowthReport.xls

Tasks in Progress

  • Wash the car
    Rejected
    Written by Bob
  • Task with hover dropdown menu
    By Johnny
    NEW
  • Badge on the right task
    This task has show on hover actions!
    Latest Task
  • Go grocery shopping
    A short description ...
  • Development Task
    Finish React ToDo List App
    69

Urgent Notifications

All Hands Meeting

Yet another one, at 15:00 PM

Build the production release
NEW

Something not important
+

This dot has an info state