# Action

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

Pattern: `action.*` (this page) · Component: [`<Action>`](https://www.prongs.dev/docs/components/action.md) · Intents: [27](#intents)

## Intents

| Intent | Status | Use it for |
|---|---|---|
| [`action.submit`](https://www.prongs.dev/docs/intents/action/submit.md) | `<button>` | Sends a form |
| [`action.save`](https://www.prongs.dev/docs/intents/action/save.md) | `<button>` | Keeps changes the user made to something that already exists |
| [`action.create`](https://www.prongs.dev/docs/intents/action/create.md) | `<button>` | Makes something new: a post, project, page or item |
| [`action.start`](https://www.prongs.dev/docs/intents/action/start.md) | `<a>` | Begins the main flow a page exists for: get started, sign up, try it |
| [`action.guide`](https://www.prongs.dev/docs/intents/action/guide.md) | `<button>` | The quieter call to action beside the main one, opening the guide to it: get started, read the docs |
| [`action.next`](https://www.prongs.dev/docs/intents/action/next.md) | `<button>` | Moves to the next step of a multi-step flow, or out of a finished one |
| [`action.skip`](https://www.prongs.dev/docs/intents/action/skip.md) | `<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`](https://www.prongs.dev/docs/intents/action/back.md) | `<button>` | Returns to the previous step of a flow without losing work |
| [`action.signout`](https://www.prongs.dev/docs/intents/action/signout.md) | `<button>` | Ends the current session and signs the person out |
| [`action.retry`](https://www.prongs.dev/docs/intents/action/retry.md) | `<button>` | Repeats something that failed or needs doing again: try again, resend an email |
| [`action.confirm`](https://www.prongs.dev/docs/intents/action/confirm.md) | `<button>` | Agrees to a decision the interface just asked about, usually in a dialog |
| [`action.cancel`](https://www.prongs.dev/docs/intents/action/cancel.md) | `<button>` | Abandons the current task without keeping changes |
| [`action.edit`](https://www.prongs.dev/docs/intents/action/edit.md) | `<button>` | Opens something that exists so it can be changed |
| [`action.add`](https://www.prongs.dev/docs/intents/action/add.md) | `<button>` | Puts an existing thing into a list or collection: add a source, add a member |
| [`action.remove`](https://www.prongs.dev/docs/intents/action/remove.md) | `<button>` | Takes an item out of a list without destroying it: remove a source, unsubscribe |
| [`action.delete`](https://www.prongs.dev/docs/intents/action/delete.md) | `<button>` | Permanently destroys data |
| [`action.share`](https://www.prongs.dev/docs/intents/action/share.md) | `<button>` | Sends something to other people or copies a link to it |
| [`action.copy`](https://www.prongs.dev/docs/intents/action/copy.md) | `<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`](https://www.prongs.dev/docs/intents/action/open.md) | `<a>` | Opens a piece of content to read or view it: an article title, "open original", a preview |
| [`action.inspect`](https://www.prongs.dev/docs/intents/action/inspect.md) | `<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`](https://www.prongs.dev/docs/intents/action/toggle.md) | `<button>` | Turns a state on or off and shows which: follow, subscribe, like. Pass pressed={on} |
| [`action.utility`](https://www.prongs.dev/docs/intents/action/utility.md) | `<button>` | A small helper command that changes no important data: refresh, mark all read |
| [`action.dismiss`](https://www.prongs.dev/docs/intents/action/dismiss.md) | `<button>` | Closes or hides something without changing data: a dialog, notice or menu |
| [`action.reveal`](https://www.prongs.dev/docs/intents/action/reveal.md) | `<button>` | Shows or hides content in place: show password, show more |
| [`action.navigate`](https://www.prongs.dev/docs/intents/action/navigate.md) | `<a>` | Goes to another page or place from inside a sentence: an inline link |
| [`action.more`](https://www.prongs.dev/docs/intents/action/more.md) | `<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`](https://www.prongs.dev/docs/intents/action/sort.md) | `<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.*`](https://www.prongs.dev/docs/intents/heading.md) |
| Running text and the small pieces around it: introductions, captions, labels, facts about an item, code. | [`text.*`](https://www.prongs.dev/docs/intents/text.md) |
| Messages about what just happened or is happening. They are announced to screen readers. | [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md) |
| 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.*`](https://www.prongs.dev/docs/intents/nav.md) |
| Picking from a small set shown all at once: options for a setting, filters, colours. | [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) |
| What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete. | [`field.*`](https://www.prongs.dev/docs/intents/field.md) |
| Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement. | [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) |
| Images that identify a person or illustrate content, with a text fallback when there is no image. | [`media.*`](https://www.prongs.dev/docs/intents/media.md) |
| Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader. | [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) |
| Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail. | [`popover.*`](https://www.prongs.dev/docs/intents/popover.md) |

## 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`.