OCS Sass Buttons Grammar
OCS Sass Buttons Grammar
Use OCS button classes to style actions and group them in a links container. Run each CodeRunner to view the buttons.
Popcorn Hack #1: Add the Base Button Class
Change the link class to ocs__btn to apply OCS button styling.
Challenge
Popcorn Hack 1 - Add the OCS button class
Popcorn Hack #2: Modifiers and Button Groups
Add pill and fill to the Complete Daily Check-In button. Wrap both actions in an ocs__links container.
Challenge
Popcorn Hack 2 - Add button modifiers and group actions
Popcorn Hack #3: Status Tones and Wide Layout Bar
Change the second link to alert-green, use ocs__links--wide, and add fill to the Crisis Support button.
Challenge
Popcorn Hack 3 - Use status tones and a wide links layout
Homework Hack #1: Adaptive Resource Toolbar
Put all three actions in an ocs__links container. Remove inline styles and use the specified semantic classes for Urgent Support, Self-Care, and Community.
Challenge
Homework Hack 1 - Build the adaptive resource toolbar
Homework Hack #2: Primary vs. Secondary Action Priority
Wrap the actions in ocs__links and use the requested priority classes: filled accent for the primary action, outline for the secondary action, and red outline for the crisis hotline.
Challenge
Homework Hack 2 - Set action priority with OCS classes