Button and ButtonLink

The Button Component supports different variants, sizes, loading and disabled states, can include icons or only be an icon button. By default it also has an animation enabled, that can be disabled if needed. The ButtonLink Component looks exactly like Button but renders an anchor tag.

Includes basic buttons in different variants and sizes, buttons with icons, loading state, disabled state, no animation, icon buttons.

Examples

<Button variant="primary" size="large">Primary large</Button>
<Button variant="secondary" size="large">Secondary large</Button>
<Button variant="tertiary" size="medium">Tertiary medium</Button>
<Button variant="link" size="medium">Link medium</Button>

Buttons with icons

<Button icon={<RiArrowRightCircleLine />}>
  Right icon (default)
</Button>
<Button
  icon={<RiArrowLeftCircleLine />}
  iconPosition="left"
>
  Left icon
</Button>

Loading state

<Button loading={isLoading}>
  Search
</Button>
<div className="sr-only" aria-live="polite" aria-atomic="false">
  {isLoading ? 'Searching...' : 'Search ready'}
</div>

Disabled state

<Button disabled>Click me</Button>

No animation

<Button disableAnimation>Primary large</Button>

Icon only buttons

<Button
  variant="primary"
  size="large"
  aria-label="Search"
  icon={<RiCommandLine />}
/>

<ButtonLink />

ButtonLink looks exactly like Button but renders an anchor tag and accepts an href prop for navigation.

Here are some examples of the ButtonLink component in different variants, sizes, and states:

<ButtonLink
  href="/account"
  // all other button props
>
  Go to account
</ButtonLink>

Accessibility

• Icon only buttons must have an aria-label.
• When showing a loading state, there must also be an aria-live region to announce the loading state to screen readers.
• Do not use tertiary buttons as replacements for text links in inline text as they might not provide enough contrast to surrouding text.
• These buttons are not intended to be used as tab or accordion controls or any other control requiring an active state.
• Whe multiple buttons are rendered in a row or column, their focus and hover states must make them visually distintive from the rest of the buttons in the group.

Requirements

The following folder needs to be copied to your project:

Components

<Button />

The <Button /> component renders a <button> element. Per default it has an animation on hover that rotates the text (<RotateOnGroupHover />).

<ButtonLink />

The <ButtonLink /> component renders an <a> element and accepts an href prop for navigation. It looks exactly like the <Button /> component and has the same props.

Shared Props

<RotateOnGroupHover />

The <RotateOnGroupHover /> component is a wrapper component that adds a rotation animation to its children when the parent group is hovered. It is used inside the <Button /> & <ButtonLink /> component to add the rotation animation on hover.

• Add the rotateOnHoverGroupClassName class to the parent element who's hover state you want to use as the trigger for rotation.
• Wrap the child element you want to rotate in the <RotateOnGroupHover> component.

Shared Props