Guidelines around patterns must be concise and clear. When documenting a pattern in Solar please provide the following, in this order:


  • Pattern name
  • Short description (one or two sentences, typically "X does this" or "X allows users to do this")
  • Live example + code
  • (Optional) Make sure the images used in live example code are not in webp format since it isn't supported in all the browsers.

If available:

  • Research insights and additional guidelines (e.g. "use when", "don't use when")
  • Variants
  • Behaviour, such as validation
  • Configurations
  • Editorial
  • Implementation
  • If there are related patterns include links in the "see also" section

See Date Input as an example.

Stateful examples

If you need to document a component that will require some sort of state being passed to it you can use the DocStateProvider component.

This component uses the function as children pattern. You'll have access to a state object which can be pre-populated and a function for setting a new state.

Below is an example of usage:

<DocStateProvider initialState={{ clicked: false }}>
{({ state, setState }) => (
<button onClick={() => setState(state => ({ clicked: !state.clicked }))}>
{state.clicked ? 'clicked' : 'click me'}