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

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');