GitHub

Action

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

Pattern

action.*

Component

<Action>

Intents

27
View as Markdown

Intents

action.submit<button>

Sends a form

action.save<button>

Keeps changes the user made to something that already exists

action.create<button>

Makes something new: a post, project, page or item

action.start<a>

Begins the main flow a page exists for: get started, sign up, try it

action.guide<button>

The quieter call to action beside the main one, opening the guide to it: get started, read the docs

action.next<button>

Moves to the next step of a multi-step flow, or out of a finished one

action.skip<button>

Moves to the next or previous item in a sequence someone steps through: the next track, the previous episode, the next photo in a dialog.media

action.back<button>

Returns to the previous step of a flow without losing work

action.signout<button>

Ends the current session and signs the person out

action.retry<button>

Repeats something that failed or needs doing again: try again, resend an email

action.confirm<button>

Agrees to a decision the interface just asked about, usually in a dialog

action.cancel<button>

Abandons the current task without keeping changes

action.edit<button>

Opens something that exists so it can be changed

action.add<button>

Puts an existing thing into a list or collection: add a source, add a member

action.remove<button>

Takes an item out of a list without destroying it: remove a source, unsubscribe

action.delete<button>

Permanently destroys data

action.share<button>

Sends something to other people or copies a link to it

action.copy<button>

Copies the short text beside it, like a command, as an icon alone sized to the line. It stays pressable inside a card its link covers

action.open<a>

Opens a piece of content to read or view it: an article title, "open original", a preview

action.inspect<button>

Opens the details of a record in a table, on its name: the whole row becomes clickable and lights up on hover, while the other controls in it, like its menu, stay clickable

action.toggle<button>

Turns a state on or off and shows which: follow, subscribe, like. Pass pressed={on}

action.utility<button>

A small helper command that changes no important data: refresh, mark all read

action.dismiss<button>

Closes or hides something without changing data: a dialog, notice or menu

action.reveal<button>

Shows or hides content in place: show password, show more

action.navigate<a>

Goes to another page or place from inside a sentence: an inline link

action.more<button>

A link on its own line to more about what is above it, with an arrow after it: Learn more, See all, Full changelog. Write only the words; the arrow (Lucide arrow-right) is added

action.sort<button>

Sorts a table by a column: the button inside its th. Put aria-sort="ascending" or "descending" on the th of the sorted column; the arrow follows it

Choosing a domain

Find the row that describes your case, and use the domain on the right.

  • If the problem is

    Use

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

    heading.*

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

    text.*

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

    feedback.*

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

    action.* this page

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

    nav.*

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

    choice.*

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

    field.*

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

    layout.*

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

    media.*

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

    dialog.*

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

    popover.*

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.