LearningUkulele.com
Learn a New Chord-A-Day:
Start with Jan 1 * C
Basics the Beyond with Curt Sheller Your "TMI", "Total Music Information" Site…
Lessons
Series
Songs
Books
About
Help
Search
Site Layout & Testing
Testing: Buttons & Tags
Buttons classes are in the app.css file in the @layer components.
photo by Louis Martin
10 October 2025
Site Color Palette Buttons & Tags Typography
NOTE (2025-26): Using AlpineJS for functionality. Have replaced or replacing Vue components with Alpine JS and Livewwire.
Site Development
  • Redis • If not running (see Redis Visits: *, below the Diceware )
  • Alpine.js • If not running (see Redis Visits: *, below the dice)
  • phpinfo • Should NOT work, run by hand.

Check the controllers of these test calls in this list before using. The might do something you don't want

Roles & Permissions

TailwindCSS

stripe

  • Stripe Checkout • Using Laravel Spark for ALL Subscription managements (May 2021)
Site Layout & Components
A to Z Alpha Buttons
(FluxUI) [default. sm, xs]
A B C D E F G
H I J K L M N O
P Q R S T U V W X Y Z

Buttons

Using FluxUI: Button component ..
Components: x-ui.btn & FluxUI: button. x-ui.btn passes props to FluxUI: button.
x-ui.btn then flux:button
Variant: outline [default]
ui.btn default
flux:button default
Variant: primary
Components: x-ui.btn & FluxUI: button. x-ui.btn passes props to FluxUI: button.
ui.btn default
flux:button default flux:button sm flux:button xs
Variant: filled
Components: x-ui.btn & FluxUI: button. x-ui.btn passes props to FluxUI: button.
ui.btn default
flux:button default flux:button sm flux:button xs
All the tailwindcss v4 color palette is available for buttons colors.
See the FluxUI: Button Docs for all available options.

Site Examples

In addition to the btn and btn-* sizes class the following are available: btn class: btn-text-center, btn-text-bold< /p>

Primary Button — Color: brand
Primary Button
Primary Button
All the tailwindcss v4 color palette is available for buttons colors.
See the FluxUI: Button Docs for all available options.
PrimaryLevels Colors
FluxUI: Button component colors examples.
LearningUkulele.com Membership Levels Colors
FluxUI does not have Bronze, Silver, or Gold colors and replacement close to what LearningUkulele.com uses. So a style tag is used on the component.
Bronze
Silver
Gold
Components: Tags
Need to make this actually look like tags. FluxUI has badges that could replace 'tags', but tags look really cool vs. badges
flux:badge
or pills
flux:badge variant="pill"
.

CSS

tag tag-sm tag-*

Gray Grey Black Brand Red Orange Yellow Green Blue

Membership Levels

Bronze Silver Gold Forever Forever-2022 Student

Instruments

Ukulele Guitar Bass Piano Drums Mandolin Kazoo harmonica

Miscellaneous

Admin Dealer

Sizes

xs sm md lg

🚀 🚧 End of LearningUkulele.com Site Content 🚧 🌍
NOTE: PICS ARE FROM VARIOUS SOURCES. FAIR USE NOTICE:: This site contains images of which have not been pre-authorized. This material is made available for the purpose of analysis, teaching, comment and critique. The 'fair use' of such material is provided for under U.S. Copyright Law. In accordance with U.S. Code Title 17, Section 107, material on this site (along with credit and attributions to original sources) is viewable for educational and intellectual purposes - (frwebgate.access.gpo.gov). If you are interested in using any copyrighted material from this site for any reason that goes beyond 'fair use,' you must first obtain permission from the copyright owner.
art by Curt Sheller
On the web since 1992 and a Mac since 1987 (Mac II) • Serving up Ukulele content since 2003 ( 22 years ago ) • Lets Kanikapila!!! • And, since Sept 2020, happily on Pop!_OS Linux & COSMIC-DE and a System76 Thelio . Half the cost of the iMac and a real treat to use. I use it for ALL development work. Only wish the Affinity Suite of apps by serif where available on Linux (and I do know you can run them in Wine with a few hacks).
v20251117-0915.v4•L12.41.1 (PHP-8.2.23)
This sit has ben profesionaly red. awl tpyos aree free and no aditonal chrge • I'm blaming it on “jazz” fingers. “Aoccdrnig to rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.”
Site developed, hand-coded, and maintained by Curt Sheller, Curt Sheller Publications , Pottstown, PA 19464 USA, North America, Northern Hemisphere, Earth, Solar System / Orion Arm of the Milky Way Galaxy, Virgo Supercluster, Laniakea Supercluster, Observable Universe ... and hosted on DigitalOcean , eCommerce using stripe , managed using Laravel Forge , and analytics (which we DO NOT share) by Plausible . See the LearningUkulele.com Site Credits page for credit to all the hardware, software, tools, and goodies we use to build this amazing site. A proverbial digital blob of music information.
Made with by Curt Sheller for LearningUkulele.com–Learning Ukulele with Curt and the ukulele community • © 1992 - 2026 Curt Sheller
Show your support!
Support LearningUkulele.com–Learning Ukulele with Curt development via a monthly membership or a one-time Forever membership! Learn more
Sign-Up Today …