Tags

State nodes can have tags, which are string terms that help group or categorize the state node. For example, you can signify which state nodes represent states in which data is being loaded by using a "loading" tag, and determine if a state contains those tagged state nodes with state.hasTag(tag):

const feedbackMachine = createMachine({
  id: 'feedback',
  initial: 'prompt',
  states: {
    prompt: {
      tags: ['visible'],
      // ...
    },
    form: {
      tags: ['visible'],
      // ...
    },
    thanks: {
      tags: ['visible', 'confetti'],
      // ...
    },
    closed: {
      tags: ['hidden'],
    },
  },
});

const feedbackActor = createActor(feedbackMachine).start();

console.log(feedbackActor..getSnapshot().hasTag('visible'));
// logs true

Using tags in Stately Studio

You can add tags to states and events in Stately Studio.

First, select the state or event you want to tag.

On the canvas

1. Use the plus icon button to open the edit menu.
2. Choose Tag from the menu to add a tag block.
3. Write your tag’s name in the tag’s text input.
4. Use the plus icon button alongside your recent tag to add more tags.

Using the event details panel

1. Open the state or event Details panel from the right tool menu.
2. Use the + Tag button to add a tag block.
3. Write your tag’s name in the tag’s text input.
4. Use the plus icon button alongside your recent tag to add more tags.

TypeScript

You can strongly type the guards of your machine in the types.guards property of the machine config.

const machine = createMachine({
  types: {} as {
    tags: 'pending' | 'success' | 'error';
  },
  // ...
  states: {
    loadingUser: {
      tags: ['pending'],
    },
  },
});

const actor = createActor(machine).start();

actor
  .getSnapshot()
  // Autocompleted
  .hasTag('pending');