Penguin: Buttons
Brand Primary Color: brand
Brand Secondary Color: secondary
Brand COSMIC Color: cosmic
Buttons
The base
buttons have a link on them for testing. Link are a pain for anything other than text.
Brand & Main
btn-brand & btn-brand are the same.
Brand Solid
btn-brand-solid- & btn-brand-solid are the same.
Brand Light
btn-brand-light- & btn-brand-solid are the same.
Secondary
btn-secondary buttons are solid.
Secondary Light
btn-secondary-light
Cosmic
btn-cosmic buttons are System76 COSMIC DE inspired colors.
Cosmic Light
btn-cosmic-light buttons are System76 COSMIC DE inspired colors.
Site Examples
In addition to the btn and btn-* sizes class the following are available: btn class: btn-text-center, btn-text-bold
Solid color buttons: red, blue, green, orange and yellow are available.
Primary Colors
LearningUkulele.com Membership Levels Colors
Blade Component
Tags
Need to make this actually look like tags.
CSS
tag tag-sm tag-*
Membership Levels
Instruments
Miscellaneous
VueJS Component
Default Size: tag-xs
Using this Vue component in the MeiliSearch User component .
Sizes
xs sm md lg