Buttons and form actions

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Buttons and form actions—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Buttons and form actions in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Buttons and form actions in your own words.

Pico styles native <button> elements—primary by default, with optional secondary, contrast, and outline classes for visual hierarchy (not available in the classless build).

Semantics and grouping

Use type="submit" for the main form action; type="button" for in-page actions that do not submit.
Cluster related actions with fieldset role="group" so cancel/save sit on one row.
aria-busy="true" on a button shows Pico’s loading state during async work.
Avoid clickable divs—role="button" is styled, but real button elements get focus and disabled behavior for free.

Form buttons are full width by default to align with inputs; outside forms, inline button rows behave like normal inline content.

Self-check

Which classes create a secondary outlined button?
How do you indicate a submit is in progress without a custom spinner?
Why keep one obvious primary submit per form?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

secondary vs contrast?
Submit vs button type?

No discussion yet. Be the first to ask a question.