Pattern States

Pattern states provide your team and client a simple visual of the current state of patterns in Fepper. Pattern states can track the progress of a pattern from development, through client review, to completion. They can also be customized to refer to additional states. They are denoted by colored dots in the UI menu, Code Viewer, and View Alls.

Default Pattern States

Setting a Pattern State

Setting a pattern's state is accomplished by writing a state key and value in the pattern's .md file (or whatever is configured in patternlab-config.json as frontMatterExtension). Consider this pattern:


Create or edit a file in the same location named

state: inreview

The state key/value can be mixed with other key/values like so:

state: inreview
content_key: content
Content is key

Setting a Pseudo-Pattern State

To set a pseudo-pattern's state, create a similarly named file with the .md extension (or frontMatterExtension).

For example, for the following pseudo-pattern:


Name the file:


Adding Custom States

The three default states might not be enough for everyone. To add custom states, modify source/_styles/pattern-scaffolding.css, a Fepper-specific stylesheet that is editable by end-users. You can use the following as your CSS template for new pattern states:

.newpatternstate::before {
  color: #998866 !important;

Add state: newpatternstate to your pattern's .md file to have the new pattern state show in the UI menu and Code Viewer.