Arrows can be used with Collapse
and Select
to visually re-enforce the relationship between collapseable content and its parent.
<SpacedGroup>
<SpacedGroup direction="vertical">
<Arrow />
<span>Closed
</SpacedGroup>
<SpacedGroup direction="vertical">
<Arrow open />
<span>Open</span>
</SpacedGroup>
<SpacedGroup direction="vertical">
<Arrow disabled />
<span>Disabled</span>
</SpacedGroup>
<SpacedGroup direction="vertical">
<Arrow is="span" />
<span>is a Span instead of a button</span>
</SpacedGroup>
</SpacedGroup>
</Playground>