The inline arrow is used in dropdowns and disclosure components to indicate an element.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| direction | oneOf 'up' | 'down' | 'left' | 'right' | - | - | Direction the arrow points |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Arrows can be found in many places in the app, but are never used alone. They're the component that makes a dropdown look like a dropdown, and what indicates to the user a disclosure component is expaned or collapsed.
When to Use It
Use this when you're building a component that has some sort of reveal heuristic, such as a dropdown.
Best Practices
Don't use this alone
This component doesn't do much alone, and shouldn't be placed in the page outside of a dropdown or other component.