ArrowToggle

Maintainer:
Marginy605
GitHub
direction
size

ArrowToggle is a component for displaying the chevron icon. It can rotate in four directions and can be used to display drop-down lists, cut components, etc.

Appearance

ArrowToggle has four possible directions: top, right, bottom, and left.

top right bottom left

<ArrowToggle direction="top" /> top
<ArrowToggle direction="right" /> right
<ArrowToggle direction="bottom" /> bottom
<ArrowToggle direction="left" /> left

Size

10 20 30 40 50 100

<ArrowToggle size={10} /> 10
<ArrowToggle size={20} /> 20
<ArrowToggle size={30} /> 30
<ArrowToggle size={40} /> 40
<ArrowToggle size={50} /> 50
<ArrowToggle size={100} /> 100

Use as an interactive element

Here is an example of using ArrowToggle with a toggling icon:

const [directionIndex, setDirectionIndex] = React.useState(0);
const directions = ['top', 'left', 'bottom', 'right'] as Array<ArrowToggleProps['direction']>;
const direction = directions[directionIndex % directions.length];

return (
    <Button onClick={() => setDirectionIndex(directionIndex + 1)} view="flat">
        <ArrowToggle {...args} direction={direction} /> <h3>{direction}</h3>
    </Button>
);

Properties

NameDescriptionTypeDefault
classNameclass HTML attributestring
directionUsed to set the arrowToggle directionstring"bottom"
sizearrowToggle size (in pixels)number16
qadata-qa HTML attribute, used for testingstring