Arrow

Arrows can be used with Collapse and Select to visually re-enforce the relationship between collapseable content and its parent.

Closed
Open
Disabled
Chevronis a Span instead of a button
<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>

API