Skip to content
SkillCodex
Menu

Concept cluster

Trigger or navigate

Compare a named action, navigation to a destination, and a compact action represented by an icon.

Try the 3 concepts, compare what changes, then use the Pack that fits your need.

Try the components

Trigger or navigate

Try it

Does the control trigger an action, change location, or need to remain icon-only?

Button

Shared trial context

A project screen lets the user trigger an operation or move to a destination from a control suited to the available space.

Button

Mission

Button

Activate Save with Space, verify the pending state blocks a second request, and recover from a server error.

Subject: Weekly summary

Live result

The draft is ready to save.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
The enabled submit button has a clear label, visible focus, and sufficient text contrast.
Edge case
During submission, the button preserves its width, exposes Saving, and blocks duplicate activation without removing focus.

What this example shows

Button performs an action; Link navigates to a destination, while Icon button is the compact button variant whose visible label is replaced by an icon.

Use the Pack — Button

Which fits your need?

Button

Submitting or resetting a form

Link

Moving to another page or route

Which component will you use here?
Read the full PackVerify the result
Difference and sources

Button performs an action; Link navigates to a destination, while Icon button is the compact button variant whose visible label is replaced by an icon.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Control

    The interactive element that receives input and exposes state.

    The three concepts

    ConceptButtonA named control that performs an action in the current interface when activated.OpenConceptLinkA named connection to another destination that preserves standard browser navigation behavior.OpenConceptIcon buttonA compact button represented visually by an icon but still given its own stable accessible action name.Open

    The three comparisons

    ComparisonButton vs LinkComparisonButton vs Icon buttonComparisonIcon button vs Link

    Signals you are confusing them

    These descriptions fit every concept in the cluster, so none of them is enough to decide.

    • an activatable control performs an operation or moves to a destination
    • available space determines whether the action uses text or only a symbol

    Other concept clusters

    Concept clusterMotion & EffectsConcept clusterSmall contextual surfacesConcept clusterModal surfacesConcept clusterEdge-attached surfacesConcept clusterChoose from a listConcept clusterChoices and binary statesConcept clusterChange view or reveal contentConcept clusterInform the userConcept clusterWait and track progressConcept clusterEnter textConcept clusterOrient within a journeyConcept clusterStructure and explore data