Components
Buttons and inputs
Ways to act and to answer.
Button
Five kinds, from loudest to quietest: Primary, Secondary, Soft, Plain, and Text, each in three sizes. Most buttons are Soft; the glass Secondary is for actions that need presence, and Primary is kept for the one action that matters.
From loudest to quietest
Primary
Secondary
Soft
Plain
Icon buttons
Text
On a business’s brand card
Primary
Secondary
Soft
Plain
Icon buttons
Text
PrimaryOnly for the action that finishes or moves a task forward, and the loudest action on any page. At most one per form, dialog, or step. Booking’s main action is the black Primary.Book for Maya, Continue, Save
SecondaryAn action that needs presence: beside a Primary, leading a section, or on a photo or a business’s brand card. In the danger tone, the button that confirms a delete.Add child, Share, Delete chat
SoftThe default. Actions inside content: a row, a card, a list, a sheet.Edit, Finish booking, See options
PlainDismissive and toolbar actions that line up with other buttons but ask for nothing.Cancel, Not now, Skip
Icon buttonCircle for actions with weight, like saving or sharing a business; Soft circle inside content. Plain for quiet tools, like Close or More.Save, Share, Close, More
TextLinks in text, Back, and the quietest actions. Underlines on hover.Learn more, Back
When to use which
- Start with Soft. Most buttons inside content are Soft.
- Use Secondary (glass) when an action needs presence: beside a Primary, leading a section, or on a photo or a business’s brand card. Not for every row.
- Use Plain for Cancel, Not now, and Skip, and for labeled toolbar actions.
- Use Primary only for the action that finishes or moves a task forward, like Continue or Book for Maya. One per form, dialog, or step. A page’s loudest action is Primary; there is no louder type.
- Name what happens next and who it’s for, never a price: Continue for Maya, Book for Maya.
- Going to another page is not an action: links are Secondary, Soft, or Text, never Primary.
- Pair a Primary with Secondary, Plain, or Text, never with another Primary. The main action goes last: on the right, or at the bottom when stacked on a phone.
- Size by place, not by importance: small in rows, cards, and toolbars and for most buttons on a phone; medium on the web; large only for the one action pinned to a phone’s foot.
- Keep a group to three buttons. Put any more in a menu.
- Disable a button only when the action is impossible right now. Otherwise let people try, and explain what is missing.
- Use the danger tone only for an action that deletes something or removes someone’s access, on Secondary, Soft, Plain, or Text. Ask before it happens. The button that confirms it is Secondary in the danger tone; Primary ignores the tone.
- The hand-drawn line (scribble) is for one editorial moment on a page at most, never a routine action.
Do and don’t
Do: one Primary, with Plain beside it
Don’t: two Primaries compete
Do: going to another page is Soft or Secondary
Don’t: a Primary to go somewhere
Hands-on Museum isn’t booked yet
Do: Soft and small for an action in a rowHands-on Museum isn’t booked yet
Don’t: glass on every rowSizes: small in rows, cards, and toolbars and for most buttons on a phone; medium on the web; large for the one action pinned to a phone’s foot
SizeHeightLabelSide paddingIcon: with a label, aloneWhere
Small32px13px12px16px, 16pxRows, cards, tables, toolbars, and most buttons on a phone
Medium40px15px16px18px, 20pxThe default on the web: forms, dialogs, page actions
Large48px16px20px20px, 24pxThe one main action pinned to a phone’s foot, or a sparse focus screen
Primary
Small, 32px
Medium, 40px
Large, 48px
Secondary
Small, 32px
Medium, 40px
Large, 48px
Soft
Small, 32px
Medium, 40px
Large, 48px
Plain
Small, 32px
Medium, 40px
Large, 48px
Text
Small, 13px
Medium, 15px
Large, 16px
Text with scribble (opt-in, one per page at most)
Hover
Long label
Ends in an ellipsis
States
Primary
Secondary
Soft
Plain
Text
States on a business’s brand card
Primary
Secondary
Soft
Plain
Text
Danger: only for deleting something or removing someone’s access, and always confirmed
Soft
Default
Plain
Disabled
Secondary
Default
Hover or focus
Disabled
Loading
Text
Default
Hover
Disabled
Confirming a delete
Plain to keep, Secondary in the danger tone to delete
Inline: a link inside a sentence, at the sentence’s size, underlined at rest
New to School’s Out? Sign up
Rainbow glow: only the signed-out Sign up, the site’s one call to join
Show details
- Five types since October 22 (Hannah): Primary is the loudest button, and a page’s loudest action is a Primary. Booking’s main action is the black Primary (Book for Maya).
- Glazed (Hannah, October 2): buttons share the cards’ material. Primary is a pill, solid off-black on plain surfaces (Hannah, October 5), light with a dark label in the dark appearance (October 11), and black in overlay mode on a business’s brand card, where it takes a deep shade of the card’s color; it carries a top highlight, sheen, and a shadow tinted by the surface.
- Secondary is glass (Hannah, October 19, after Linearity’s glass buttons): the surface’s tonal fill under a light blur, a soft glow inside the edge that brightens on hover, and a lit 1px rim whose light follows the pointer, with a faint halo just outside.
- Soft and Plain (Hannah, October 9): the glass Secondary on every row was too much, so the everyday buttons are flat. Soft is the surface’s ink at 7% with no edge, shadow, or blur (after Apple’s gray buttons and uiarc.dev’s quiet tiers); Plain has no fill until hover, like the plain icon button. Soft is the default.
- Sizes (Hannah, October 9): 32, 40, and 48px, the control scale every control shares, so a button lines up with the chips and fields beside it. They were 36, 44, and 52px, which read too big on a phone. Touch targets stay 44px: on touch screens small and medium grow their hit area, not their drawn size.
- Text buttons underline on hover (October 9). The hand-drawn line is opt-in (scribble): solid and 2px like a fine-tip marker (Hannah, October 5), in School’s Out blue (on a business’s brand card, in the card’s text color), after the footer links at extrafazant.nl in our own five strokes. It draws in over 450ms, finishes, then erases over 400ms when the pointer leaves. On every text button it was distracting, so it is kept for one editorial moment on a page.
- Danger (Hannah, October 7, from Figma’s Deactivate and Delete account pills in parent settings): Secondary, Soft, Plain, and Text in the error color, for deleting something or removing someone’s access. The button that confirms a delete or a removal is Secondary in the danger tone (Hannah, October 22), so it reads red; Primary ignores the tone.
- Rainbow glow (Hannah, October 28, for the signed-out Sign up): School’s Out’s accents (yellow, lime, turquoise, blue, pink, ruby, and orange, the page end’s order around the wheel) rise from inside the Primary pill’s bottom edge as one soft, diffused glow, held still. Its color is about as strong at rest as on hover; only its reach changes. At rest it hugs the bottom edge as a line of color, and on hover and keyboard focus it rises from the edge, never past the label, replacing the darker hover veil; a press keeps it up. Brightest at the foot and gone by the top, so the label keeps the pill’s ink; on the light pill in the dark appearance it reads as a pastel glow. It is the one gradient inside a control, kept for the call to join; every Sign up a signed-out visitor sees wears it, and nothing else does.
- Icons and the loading spinner always sit at the right end, after the label. Disabled is one neutral look for every type; loading keeps the button’s colors and label, with a spinner after 150ms, and keeps keyboard focus (after uiarc.dev). Hover, focus, and press add contrast, and a press shrinks every pill to 97%. Measured against Vercel’s Web Interface Guidelines and Geist’s Button.
- The rules follow Carbon (one primary button per page; buttons are not for navigation), Atlassian (one primary per area; default buttons for supporting actions; avoid disabling), GOV.UK (one main call to action per page; too many calls to action make it hard to know what to do next), Polaris (a single primary button per section), and Material (filled buttons for final or unblocking actions).
Sign-in button
Continue with Apple or Google, drawn to each provider’s own rules.
Medium (40px), and loading
Show details
- Hannah, October 26 (the log-in redesign): white with Google’s 1px gray edge in light and dark, each provider’s own mark at the left and the label centered, the same size for both so neither is less prominent. They sit above the email form, so they are always on the first screen, and the form keeps the one black Primary.
- Apple: its large artwork file at the full height, so its logo stands as tall as the G, the title black. Google: its standard color G at half the height, the label in Google’s near-black. Both labels are the library’s button label for the size, in our type (Hannah, October 26: the providers’ own sizes read as two different buttons), which bends Apple’s title proportion and Google’s font.
- The library’s exceptions to its own rules (a mark before the label, an edge on a pill, raw brand colors), kept in this one component. The marks come unmodified from Apple Design Resources and Google’s sign-in assets.
Icon button
Two kinds. Circles carry weight; the Soft circle sits quietly inside content. Plain icon buttons are quiet tools: just the icon, with a soft square behind it on hover.
Circle: actions with weight
Primary
Secondary
Soft
Disabled
Plain: quiet tools
A toolbar
Toggled on
Disabled
Outline: among filter chips
Beside outline chips, small
2
With filters on, a count on its cornerDisabled
Sizes: small, medium, large
Small, 32px
Medium, 40px
Large, 48px
On a business’s brand card
Circle: actions with weight
Primary
Secondary
Soft
Disabled
Plain: quiet tools
A toolbar
Toggled on
Disabled
Outline: among filter chips
Beside outline chips, small
2
With filters on, a count on its cornerDisabled
Sizes: small, medium, large
Small, 32px
Medium, 40px
Large, 48px
Show details
- Outline (October 30, Hannah, for Explore’s Filters button, which was a black pill reading Filters): the outline filter chip’s look as a circle, so the control that opens every filter sits among the chips as one of them. With filters on, their count shows on its corner.
- Circles follow Felix Strobel’s Soft Spot Button: the spot grows to 1.06 on a spring and settles to 0.94 on press, and the icon slides through. Primary is the Primary button’s pill; Secondary is the Secondary button’s glass, its rim light following the pointer (Hannah, October 19).
- Soft (October 9): a flat circle in the Soft button’s fill, with no edge, shadow, or motion beyond a 97% press, for icon actions inside rows and cards.
- Plain: the icon at 72% of the text color, full strength over an 8% square on hover, a 14% square on press or when toggled on, and a 97% press. Corners are 8, 12, and 16px.
Action bar
The buttons that end a form, a dialog, or a step. A row on the web; stacked full width on a phone, the main action last, nearest the thumb.
With a divider, at the end of a form
In a phone-width column it stacks, the main action last
Show details
- Created October 9 (Hannah) from eight hand-built versions in the screens (cancel, change, and canceled bookings among them).
- It stacks by its own width (under 480px), so it works the same in a phone, a sheet, or a narrow column. Put the main action last in the code; it lands at the right on the web and at the bottom on a phone.
- Pinned keeps the one action a phone screen exists for at the foot of the screen, on the page’s color, with room for the phone’s home indicator.
Booking bar
Pinned to the foot of a phone in place of the tab bar: the price for the chosen date, the date to change, and Book.
On an activity page, on a phone
$95 for the day
On a full date
$95 for the day
Show details
- Hannah, October 15, after Airbnb’s listing on a phone: the activity page’s bar below 1200px, where the tab bar would be. The price for the chosen date over the date itself, underlined, which opens Choose a session; the one action at the right, a large Primary: Book, Apply, Book on their site, or the date’s alert (Tell me if a spot opens on a full date, Remind me when registration opens on one not open yet; October 20). Since November 2 (Hannah) a full date keeps its price over the date, its alert reads Notify me, and one whose business keeps a waitlist offers Join their waitlist instead.
- The bar starts on the date that fits best: the date Explore was filtered to, or else the first open date every child who fits is free for. The page’s own session rows still book too.
- The canvas with a hairline above, 72px tall above the home indicator, at the page’s margins. Solid white since October 19 (Hannah): the sessions showed through the glass as they scrolled under. A missing price says Price on site (Hannah, October 29).
- A long date wraps under itself, from the left, and only after its comma, so a month keeps its day: “Mondays,” over “Nov 2–Dec 14” (Hannah, November 1: it centered its lines and broke as “Mondays, Nov” over “2–Dec 14”). The bar grows with it, and ConsumerShell keeps its measured height clear.
Popover
A small panel that opens under a pill or button and holds any controls, like the collections a save goes into.
Show details
- In use since October 16 (Hannah): Explore’s location picker opened in it under the Near pill on the web until October 28, when the picker was removed (every listing is in Portland). Since October 21 the collections picker opens in it at the bookmark that saved, lined up with the bookmark’s right edge (align end), and the activity page’s Location sets a time in it (Set a time).
- Created October 8 (Hannah) for Explore’s filter row, after Shop’s search filters: each dropdown pill opened its group under itself, and changes applied as they were made. Explore’s filters open in place in the sidebar now.
- On the floating surface with the floating shadow and a large radius, 288px to 360px wide, or 420px (wide, since November 2, for a collection’s Share and its row of five ways to share). Clear and the main action sit along its foot, the main action last. On a phone, a host opens the same content in a bottom Sheet instead.
More menu
A round button that opens a short list of actions, like Report a problem or Delete.
More options for Open Studio
More for Swim before summer
None yet
Last choiceShow details
- Created October 2 (Hannah) for the activity table’s rows. Now on Mellow’s chat and group rows (Delete chat, Leave group), a collection (Edit, Delete), the activity page (Report a problem), feed posts, and profiles (Report, Block).
- Under 768px it rises from the foot as a sheet over a dimmed page, with the menu’s name above 48px rows, in thumb reach (October 11, after iOS action sheets).
Text field
A labeled box for typing a short answer.
Optional
Shared only when you book.
Enter an email like name@example.com.
@
Show details
- Every field shares one shell (October 11): the label above in the small type in Medium, the box 48px tall with one radius, and a hint or an error under it. compact is 40px, for a field in a row.
- An error names the fix in plain words and carries its icon, so it never rests on red alone. The edge darkens when the field is focused by any means; the keyboard adds a soft halo.
- Fields are 16px so phones never zoom in on them.
Select
Pick one option from a list.
Where Explore searches first.
Choose an age.
Show details
- The text field’s shell with a chevron at its end.
Text area
A larger box for longer answers.
Shared only with the business.
Add a message before sending.
Optional
Show details
- The text field’s shell, three rows tall by default; drag its corner to make it taller.
Checkbox
Choose any number of options.
Off
On
Partly
Disabled
With a note
Box alone, off
Box alone, on
Radio group
Choose exactly one option.
Switch
Turn a setting on or off. It takes effect right away.
Show details
- Use it for settings that apply immediately, and a checkbox for choices submitted with a form.
Segmented control
Switch between a few views of the same content.
Medium
Large
Small
Show details
- Use two to four short options; for more, use Tabs or Select. It never scrolls: when room runs out the segments share it and long labels end in an ellipsis.
- The chosen segment is the thumb: white, and a step lighter than the track in the dark. It glides to the selected option and matches its width using the system ease-in-out motion; reduced motion switches immediately.
- Large gives each segment a 44px touch target, for phone screens: Log in or Create account, and onboarding’s How far will you travel.
- Stretch fills the width it is given, the segments sharing it equally; Explore’s Grid and Map use it, each with its icon, at the end of the filters on the web.
- Glass is for a control that floats over the page: the track wears the tab bar’s liquid glass, its light over the track’s own gray at 80%, so the white thumb still stands out. Explore’s Grid and Map float in it at a phone’s foot, centered and above the tab bar, so the switch stays under the thumb whichever view shows.
Calendar
Pick a day, or the first and last day of a stretch, from a month.
November 2026
SMTWTFS
Nothing chosen yet
November 2026
SMTWTFS
A list of months, for a sheet
SMTWTFS
November 2026
December 2026
January 2027
Show details
- Hannah, October 30, for Explore’s Filters: the dates a parent is looking for, in place of a row of month chips. Tap a day, then a later day to make it a range; an earlier day starts again, and a tap once a range is set starts a new one.
- The chosen days are the ink as a fill, as a chosen chip is, and the days between sit on the fill as one band. Today is underlined. Days before the first that can be chosen are muted.
- One month, with the previous and next months beside its name, fits a popover (Explore’s Dates quick filter). A list of months, one under the other with the weekdays once at the top and Show more months at the end, is a sheet’s own screen (Explore’s Add specific dates): two side by side read squished and small.
File picker
Upload a file by choosing it or dragging it in.
Registration documents
Drop files here, or
Photos or PDFs, up to 10 MB each.
Show details
- The booking module asks for a document with it, such as an immunization record. On touch screens the drop prompt hides, since there is nothing to drag.
Search field
Search for activities, businesses, and people, with suggestions as you type.
Compact: filters a list as you type
Explore: suggestions as you type
Suggested searches
- LanguageTopic
- CraftsTopic
- GymnasticsTopic
- DramaTopic
- ScienceTopic
The web bar: activities, businesses, and people as you type (try “br”)
Show details
- Explore (Hannah, October 16, after Shop’s search): a 40px pill on a shadow that leads with its words (no magnifying glass), with the mic as a small icon button at its end; Enter searches. Mellow’s button left its end on October 19 (describing needs in words is Mellow’s job, reached from the web bar). Where it searches from was the Near pill above it (Hannah, October 18) until October 28, when the place picker was removed (every listing is in Portland). With focus it drops suggested searches under itself (Explore also widens it 15%), over the page, on the floating surface; it closes on Escape, a choice, or leaving the field.
Chip field
Search and pick people, with each one picked shown in the field.
Show details
- A collection’s Share (Hannah, November 2, after X’s and Messenger’s To: field): the people and chats picked sit in the field as chips, and the cursor follows them, so a parent keeps typing to add more.
- A chip’s tap takes it out; Backspace in the empty field takes out the last one. The field is the compact search field, 40px, and grows a line as the chips wrap.
Choice tile
One answer in a short list where any number can be chosen.
Show details
- A chosen tile takes the ink border and a check, so the choice never rests on color alone. Onboarding asks what the family is planning for with it.
Message field
Write to Mellow or a group. Enter sends; Shift and Enter add a line.
Show details
- Send stays off until there is something to send. The + button adds an activity or a date.
- Pill (Vani, October 9, from the app): Mellow’s composer is one skinny white pill, 44px tall with its text 16px in, on a shadow and no border; Send appears only once something is typed, as the primary circle with the arrow up. Gradients belong to the page behind it, never inside it.
Detail request
Asks for a detail Mellow needs for a business’s form, with why the business asks.
With its own save choice (Not in use yet)
Missing, after Done
Show details
- Never just a field (Hannah, October 8): every question says who asks and why, in the business’s name, then how the answer is used.
- Saving (Hannah, October 13): new details are saved to the child’s profile by default, health details included, through one choice on the booking module’s Registration details list (Save new details to Maya’s profile), so a request carries no save choice of its own. Nothing is kept without the parent seeing it.
- Ask for everything a task needs at once: the booking module lists every detail, and a tap on one opens its request on a screen of its own, with Done.