icons

arrowDownToggle•
arrowUpToggle

The icon helpers allow you to add specific icons to various components.

`arrowDownToggle`

If the element or direct parent element has the aria-expanded attribute, this helper will make it render an arrow down icon on the ::after pseudo-element. The arrow is rotated up when the expandable element attribute value is aria-expanded="true".

import { ButtonGroup, Button, iconsHelpers } from '@flixbus/honeycomb-react';

<ButtonGroup>
  <Button extraClasses={iconsHelpers().arrowDownToggle} aria-expanded="false">Toggle not expanded</Button>
  <Button extraClasses={iconsHelpers().arrowDownToggle} aria-expanded="true">Toggle expanded</Button>
</ButtonGroup>
import { ButtonGroup, Button, iconsHelpers } from '@flixbus/honeycomb-react';

<ButtonGroup>
  <Button extraClasses={iconsHelpers().arrowDownToggle} aria-expanded="false">Toggle not expanded</Button>
  <Button extraClasses={iconsHelpers().arrowDownToggle} aria-expanded="true">Toggle expanded</Button>
</ButtonGroup>

`arrowUpToggle`

Works identically as the arrow down toggle, but in reverse. Can be used with dropdowns that show on top.

import { ButtonGroup, Button, iconsHelpers } from '@flixbus/honeycomb-react';

<ButtonGroup>
  <Button extraClasses={iconsHelpers().arrowUpToggle} aria-expanded="false">Toggle not expanded</Button>
  <Button extraClasses={iconsHelpers().arrowUpToggle} aria-expanded="true">Toggle expanded</Button>
</ButtonGroup>
import { ButtonGroup, Button, iconsHelpers } from '@flixbus/honeycomb-react';

<ButtonGroup>
  <Button extraClasses={iconsHelpers().arrowUpToggle} aria-expanded="false">Toggle not expanded</Button>
  <Button extraClasses={iconsHelpers().arrowUpToggle} aria-expanded="true">Toggle expanded</Button>
</ButtonGroup>