chevron-up, chevron-down, chevron-left, and chevron-right draw an
arrow on the element’s ::after pseudo-element. Each uses the current text
color, a 2px border, and a short transform transition. The transition is
removed when the user prefers reduced motion.
<button class="focus-ring" type="button">
More options <span class="chevron-down" aria-hidden="true"></span>
</button>The arrow is decorative: hide its container from assistive technology and
give the control a real text or programmatic name. A chevron does not manage
expanded state or rotate automatically when a disclosure opens. Use native
details or application state for that behavior, and update the cue only
when it reflects the real state. These direction names are physical; choose
left or right deliberately for your directionality.
The shortcuts own arrow geometry, not surrounding control dimensions or colors. Standard utilities or your component styles can supply spacing and the text color.