Skip to content
Designer Decisions

Astro component props

DecisionProps

All components that render a decision, such as the <ShowDecisionCard/> component, require the following props.

༶ store: StaticDecisionStore

The store prop provides access to all decision input data so that components can retrieve decision objects and resolve values.

The simplest way to create a decision store is, as described in the Rendering in Astro MDX guide, to create a decision loader and then retrieve the store in your pages.

import { loader } from '../decisions';


export const store = await loader();


<ShowDecision store={store} ... />

༶ d: string

A string with the name of the decision to visualize.

<ShowDecision store={store} d="Brand Pink" size="l" />
#d35084

If the decision does not exist, it renders a notice.

<ShowDecision store={store} d="Brand Green" size="m" />
Decision not found "Brand Green"

ValueProps

All components that directly render a decision or a decision value also accept the following optional props.

༶ value (true): boolean | string | object

Provide this flag to customize how the value is displayed or to hide the value(s).

Hiding the decision value

In this example we are hiding the decision value and rendering its visualization under a custom label.

<label>Brand Blue</label>
<ShowDecision store={store} d="Brand Blue" value={false} size="l" />

Formatting the decision value

With some decision types, you may want to display their value in specific formats. The value prop is passed to the specific decision component to control how the value is displayed.

For instance, Color Decisions components, component can display the color value in one or more color spaces.

<ShowDecision store={store} d="Action Color" value={['rgb', 'oklch']} size="m" />
#9b2c5a
oklch(47.63% 0.15 359.38deg)

༶ size (auto): ShowValueSize

Constrains the visualization to a specific size.

<ShowDecision store={store} d="Action Color" size={'s'} />
<ShowDecision store={store} d="Space Unit" size={'s'} />


<ShowDecision store={store} d="Action Color" size={'m'} />
<ShowDecision store={store} d="Space Unit" size={'s'} />
#9b2c5a
5px
#9b2c5a
5px

Refer to ShowValueSize for available sizes.

༶ viz (true): boolean | string

Provide this flag to chose between available visualizations or to hide the decision visualization altogether, displaying only its value(s).

Hiding the visualization

In this example we are hiding the visualization and rendering its value next to a custom label.

RGB: <ShowDecision store={store} d="Brand Pink" viz={false} value="hsl" />

RGB:

#d35084

Choosing a different visualization

Some decision types can be rendered using different visualizations.

For instance, Space Decisions components can represent a space value with a few different shapes.

<ShowDecision store={store} d="Avatar Minimum Size" viz="circle" />
<ShowDecision store={store} d="Card Thumb Minimum Size" viz="square" />
50px
175px

༶ options (optional): object

Provide this prop to configure visualization options.

Refer to the documentation of Decision Components for more details on available options.