ShowValueSize

Available visualization sizes for all components.

type ShowValueSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';

When rendering decisions you can chose a different visualization size setting the size prop to one of these.

<ShowDecision store={store} d="Action Color" size={...} />

Type Values

xs

<ShowDecision store={store} d="Action Color" size={'xs'} />

#9b2c5a

s

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

#9b2c5a

m

<ShowDecision store={store} d="Action Color" size={'m'} />

#9b2c5a

l

<ShowDecision store={store} d="Action Color" size={'l'} />

#9b2c5a

xl

<ShowDecision store={store} d="Action Color" size={'xl'} />

#9b2c5a

auto (default)

Defaults to auto in which case it stretches to use all available space.

<ShowDecision store={store} d="Action Color" />

#9b2c5a

In these cases, consider adding an explicit size value, or composing the decisions within some sort of grid or list layout.

<FlexRow>
    <ShowDecision store={store} d="Action Color" />
    <ShowDecision store={store} d="Brand Blue" />
    <ShowDecision store={store} d="Brand Pink" />
</FlexRow>

#9b2c5a

#06b4e0

#d35084