Button Class Description
Basic
Button .btn Plain ol’ regular button.
Sizes
Button .btn .btn--small Smaller-than-normal button.
Button .btn .btn--large Large button.
Button .btn .btn--huge Huge button.
Button .btn .btn--full Full-width button.
Font sizes
Button .btn .btn--mega Huge text button.
Button .btn .btn--kilo Big text button.
Button .btn .btn--hecto Regular text button.
Functions
Button .btn .btn--primary Primary actions
Button .btn .btn--secondary Secondary actions
Button .btn .btn--tertiary Tertiary actions
Button .btn .btn--error Error actions
Button .btn .btn--info Info actions
Button .btn .btn--inverse Inverse actions
Button .btn .btn--success Positive or success actions, like ‘download’ or ‘log in’.
Button .btn .btn--warning Destructive, warning actions, like ‘delete’ or ‘unfriend’.
Button .btn .btn--inactive Disabled buttons.
Styles
Button .btn .btn--soft Rounded, pill-like buttons.
Button .btn .btn--hard Hard, non-rounded buttons.
Combinations
Button .btn .btn--large .btn--positive Hard, non-rounded buttons.
Button .btn .btn--negative .btn--full .btn--soft Full-width, rounded, negative button.
Button .btn .btn--positive .btn--mega .btn--small Small, positive button with huge text.

A button in a paragraph.

 .btn .btn--natural A button in a parent element.
button

 

 .btn .btn--icon-after .bg-after--cart A button with an icon after
button

 

 .btn .btn--icon-before .bg-before--cart A button with an icon before
button
.btn .btn--light .bg-after--cart A button with no background but with an icon
button
.btn .btn--light .btn--mega .bg-after--cart A button with no background but with an icon
button
.btn .btn--light .btn--kilo .bg-after--cart A button with no background but with an icon
button
.btn .btn--light .btn--hecto .bg-after--cart A button with no background but with an icon