Attribute Components

These components render decision details and metadata.

Tip

You don’t have to use these components directly in your docs. Using ShowDecision will select the appropriate one for you.

They are exposed so that anyone can create custom visualizations, composing these directly in their custom components.

Common Props

All of these components share the same common props – d and store – to identify and retrieve the decision.

Decision Data

ShowDecisionDescription

Renders the decision’s description.

Example

<ShowDecisionDescription d="Pink Palette" />

Wide range shades of Pink

ShowDecisionUsage

Renders the decision’s usage guidelines.

Example

<ShowDecisionUsage d="Pink Palette" />

For:

• Icons
• Backgrounds

Not For:

• Typography

ShowDecisionModel

Renders the model used in the decision.

Example

<ShowDecisionModel d="Pink Palette" />

Model:

color-set/anchored

ShowDecisionParams

Renders the decision parameters.

Example

<ShowDecisionParams d="Pink Palette" />

Params:

• anchor

  [object Object]

• before

  [object Object]

• after

  [object Object]

ShowDecisionContexts

Renders the decision contexts.

Example

<ShowDecisionContexts d="Pink Palette" />

🚧 ShowDecisionContexts

Metadata

ShowDecisionData

Renders the decision raw data.

Example

<ShowDecisionData d="Pink Palette" />

{
  "name": "Pink Palette",
  "model": "color-set/anchored",
  "params": {
    "anchor": {
      "$name": "Brand Pink"
    },
    "before": {
      "steps": 4,
      "modifier": {
        "space": "oklch",
        "l": {
          "mode": "linear",
          "by": 0.07
        },
        "c": {
          "mode": "linear",
          "by": -0.02
        }
      }
    },
    "after": {
      "steps": 4,
      "modifier": {
        "space": "oklch",
        "l": {
          "mode": "linear",
          "by": -0.09
        },
        "c": {
          "mode": "linear",
          "by": -0.02
        }
      }
    }
  },
  "description": "Wide range shades of Pink",
  "usage": {
    "isFor": [
      "Icons",
      "Backgrounds"
    ],
    "notFor": [
      "Typography"
    ]
  }
}