UI

What each element is for. Rendered by the components.

Rendered by

Components

Added with

npx prongs add

Domains

Intents

186

View as Markdown

Domains

Heading

heading.*

Titles that give a page its structure, from the marketing headline down to the title of one item.

<Text> · 6 intents

Text

text.*

Running text and the small pieces around it: introductions, captions, labels, facts about an item, code.

<Text> · 27 intents

Feedback

feedback.*

Messages about what just happened or is happening. They are announced to screen readers.

<Text> · 4 intents

Action

action.*

Commands, named for what they do: save, delete, share. With an href they render a link, without one a button.

<Action> · 27 intents

Navigation

nav.*

Moving around: the home link, pages of the site, views of the same content, steps of a flow.

<Action> · 10 intents

Choice

choice.*

Picking from a small set shown all at once: options for a setting, filters, colours.

<Action> · 4 intents

Field

field.*

What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.

<Field> · 14 intents

Layout

layout.*

Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement.

<Layout> · 80 intents

Media

media.*

Images that identify a person or illustrate content, with a text fallback when there is no image.

<Media> · 5 intents

Dialog

dialog.*

Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader.

<Dialog> · 5 intents

Popover

popover.*

Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail.

<Popover> · 4 intents

Looks

The building blocks UI intents are made from: type, tone, surfaces, controls and arrangement. Code never uses them directly. Looks have no pages of their own; each is listed here with what it is built from and the intents built from it.

`typography.*`

typography.display
Largest type
Used to build:heading.pitch
typography.title
Page title type
Used to build:heading.pagetext.stat
typography.heading
Section title type
Used to build:heading.section
typography.subheading
Small heading type
Used to build:heading.item
typography.lead
Large reading type
Used to build:text.leadtext.quote
typography.body
Reading type
Used to build:text.body
typography.small
Small reading type
Used to build:text.captiontext.metatext.excerptfeedback.infotext.address
typography.label
Small, slightly heavy type for names of things
Used to build:text.labeltext.currenttext.valuetext.topictext.statustext.counttext.summaryfeedback.errorfeedback.warningfeedback.success
typography.overline
Tiny uppercase type
Used to build:heading.kickertext.term
typography.mono
Monospaced type
Used to build:text.deltatext.markertext.codelayout.registry.entry

`tone.*`

tone.default
Main text colour
Used to build:heading.pitchheading.pageheading.sectionheading.itemheading.sidetext.labeltext.currenttext.valuetext.quotetext.counttext.summarytext.outputtext.difftext.diff.linetext.tokentext.snippettext.tallytext.stattext.codenav.sequeltext.address
tone.soft
Text colour between main and muted, for introductions
Used to build:text.bodytext.leadtext.line
tone.muted
Secondary text colour, readable on every surface
Used to build:heading.kickertext.captiontext.termtext.metatext.excerpttext.topicfeedback.info
tone.accent
Brand text colour
Used to build:text.indicator
tone.negative
Error colour
Used to build:feedback.error
tone.positive
Success colour
Used to build:feedback.success
tone.caution
Warning colour
Used to build:feedback.warning
tone.info
Neutral notice colour

`surface.*`

surface.panel
Bordered box, one level above what it sits in
Used to build:layout.panellayout.teaserlayout.windowlayout.disclosure.panel
surface.sunken
Recess cut into what it sits in
Used to build:layout.loading
surface.notice
Recessed, bordered strip
Used to build:layout.notice
surface.rule
A hairline in the colour that shows on the surface it is on
Used to build:layout.divider
surface.overlay
Floats over a dimmed page and starts its own stack of surfaces
Used to build:layout.terminaldialog.taskdialog.confirmdialog.mediadialog.readerdialog.drawer
surface.floating
Floats next to the element that opened it, flipping to stay on screen. Hidden while closed, whatever display the intent sets
Used to build:popover.menupopover.pickerpopover.info

`control.*`

control.base
Shape and behaviour shared by every button
Used to build:control.primarycontrol.secondarycontrol.ghostcontrol.destructivecontrol.quietcontrol.pillcontrol.tabcontrol.swatchaction.inspectnav.areanav.viewnav.dot
control.primary
Filled, highest emphasis
Built from:control.base
Used to build:action.submitaction.saveaction.createaction.startaction.nextaction.retryaction.confirm
control.secondary
Filled, lower emphasis; shows a pressed state
Built from:control.base
Used to build:action.guideaction.cancelaction.editaction.addaction.toggle
control.ghost
No fill until hovered
Built from:control.base
Used to build:action.skipaction.backaction.dismissnav.paging
control.destructive
Filled, danger colour
Built from:control.base
Used to build:action.delete
control.quiet
Small text command; shows a pressed state
Built from:control.base
Used to build:action.signoutaction.removeaction.shareaction.copyaction.utilityaction.revealaction.sort
control.link
Inline text link
Used to build:action.openaction.navigateaction.morenav.entrynav.item
control.icon
Square, icon-only shape. Layered over any action when it has no visible text
control.pill
Rounded option; filled while pressed
Built from:control.base
Used to build:choice.optionchoice.filter
control.tab
Underlined option; underline while pressed
Built from:control.base
control.menu
Plain navigation link; strong while current
Used to build:nav.homenav.pagenav.step
control.swatch
Colour circle filled from --choice-color; ringed while pressed
Built from:control.base
Used to build:choice.color
control.select
Looks like a form field with a chevron: a button that opens choices
Used to build:choice.open

`input.*`

input.default
Bordered input box
Used to build:field.textfield.emailfield.passwordfield.searchfield.filterfield.numberfield.urlfield.multilinefield.select
input.check
Small square checkbox
Used to build:field.checkbox
input.toggle
Sliding on/off track
Used to build:field.switch
input.color
Native colour well
Used to build:field.color
input.range
A slider along a track
Used to build:field.range

`arrange.*`

arrange.rows
Its buttons and links become full-width rows, whatever their own look, keeping a danger colour; a pressed or selected one is filled and ticked
Used to build:popover.menupopover.picker
arrange.table
Table cells padded and aligned, header cells quiet, a hairline between rows
Used to build:layout.table
arrange.sidebar
A fixed-width sidebar column beside a flexible one, stacked on phones
Used to build:layout.shell
arrange.stack
Children in a column, free to shrink inside a row or grid
Used to build:layout.pagelayout.articlelayout.tasklayout.subnavlayout.asidelayout.sectionlayout.grouplayout.formlayout.fieldlayout.factlayout.listinglayout.scrollerlayout.blocks.celllayout.chartlayout.showcase.itemlayout.overlaylayout.pointslayout.stepslayout.pointlayout.listlayout.itemlayout.panellayout.teaserlayout.marketinglayout.registrylayout.registry.tracklayout.stagelayout.windowlayout.terminallayout.terminal.loglayout.agentlayout.tallylayout.tally.itemlayout.arrivallayout.bandlayout.demolayout.examplelayout.peeklayout.meterlayout.meter.filllayout.markerlayout.disclosure
arrange.row
Children in a wrapping row
Used to build:layout.headerlayout.footerlayout.headlinelayout.labelledlayout.settinglayout.actionslayout.pitch.actionslayout.toolbarlayout.choiceslayout.metalayout.factslayout.siblingslayout.pagerlayout.blockslayout.badgedlayout.docklayout.showcaselayout.commandlayout.window.barlayout.terminal.barlayout.notice
arrange.divided
Row with rules between children
arrange.grid
Grid of equal cells, as many columns as its own width fits
Used to build:layout.collection

`constraint.*`

constraint.wide
Centred, wide content width
Used to build:layout.pagelayout.headerlayout.footer
constraint.narrow
Centred, reading width
Used to build:layout.article
constraint.compact
Centred width for one short form
Used to build:layout.task

`frame.*`

frame.round
Small circle; centres initials when there is no image
Used to build:media.person
frame.cover
Wide rounded rectangle; centres the fallback text when there is no image
Used to build:media.enlargedmedia.imagemedia.artworkmedia.embed

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.