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'}

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.