ShowVizSize

Available visualization sizes for all value components.

type ShowVizSize = '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 d="Action Color" size={...} />

Type Values

xs

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

#9c2e5c

s

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

#9c2e5c

m

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

#9c2e5c

l

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

#9c2e5c

xl

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

#9c2e5c

auto (default)

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

<ShowDecision d="Action Color" />

#9c2e5c

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

<ShowDecision d="Action Color" />
<ShowDecision d="Brand Blue" />
<ShowDecision d="Brand Pink" />

#9c2e5c

#16b2dd

#d45084