GitHub

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.

A11Y Requirement

  • 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.

<Button />

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

Basic Buttons

<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 variant="primary" size="large" iconPosition="left" icon={<RiArrowLeftCircleLine />} >Primary large</Button>
<Button variant="secondary" size="large" iconPosition="left" icon={<RiArrowLeftCircleLine />} >Secondary large</Button>
<Button variant="tertiary" size="large" iconPosition="right" icon={<RiArrowRightCircleLine />} >Tertiary large</Button>
<Button variant="link" size="medium" iconPosition="right" icon={<RiArrowRightCircleLine/>}>Link medium</Button>

Loading state

<Button variant="primary" size="large" loading={true}>Primary large</Button>
<Button variant="secondary" size="large" loading={true}>Secondary large</Button>
<Button variant="tertiary" size="large" loading={true}>Tertiary large</Button>
<Button variant="link" size="medium" iconPosition="right" icon={<RiArrowRightCircleLine/>} loading={true}>Link medium</Button>

Disabled state

<Button variant="primary" size="large" disabled={true}>Primary large</Button>
<Button variant="secondary" size="large" disabled={true}>Secondary large</Button>
<Button variant="tertiary" size="large" disabled={true}>Tertiary large</Button>
<Button variant="link" size="small" iconPosition="right" disabled={true}>Link small</Button>

No animation

A11Y Requirement

  • Do not use this variant if accessibility is a must have criterion and the component it's used in features multiple buttons in a row or column.
<Button variant="primary" size="large" disableAnimation={true}>Primary large</Button>
<Button variant="secondary" size="large" disableAnimation={true}>Secondary large</Button>
<Button variant="tertiary" size="large" disableAnimation={true}>Tertiary large</Button>
<Button variant="link" size="medium" disableAnimation={true}>Link medium</Button>

Icon buttons

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

A11Y Requirement

Icon Buttons must have an aria-label.

<ButtonLink />

  • It 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:

Link primary largeLink primary mediumLink primary small
Link secondary largeLink secondary mediumLink secondary small
Link tertiary largeLink tertiary mediumLink tertiary small
Link link mediumLink link small
<ButtonLink size="large" variant="primary" href="/">Link primary large</ButtonLink>
<ButtonLink size="large"  variant="secondary" iconPosition="right" icon={<RiArrowRightCircleLine />} href="/">Link secondary large</ButtonLink>
<ButtonLink size="large" variant="tertiary" href="/" loading={true}>Link tertiary large</ButtonLink>
<ButtonLink size="large" variant="link" href="/">Link link large</ButtonLink>
<ButtonLink
  href="/"
  variant="primary"
  size="large"
  aria-label="Search"
  icon={<RiCommandLine />}
  loading={true}
/>

Requirements

3rd Party Librariesversion
class-variance-authority^0.7.1

The following folder needs to be copied to your project:

Copy to projectReason
ui/components/button/Includes <Button />, <ButtonLink /> and <RotateOnGroupHover />

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
PropTypeDescription
variant'primary | secondary | tertiary | link'The variant of the button. The link variant only looks like a link, but does not render an anchor tag.
size'small | medium | large'The size of the button. The variant link can't be size="large".
disabledbooleanThe disabled state of the button. Adds disabled:cursor-not-allowed.
loadingbooleanThe loading state of the button. Shows a spinner icon and adds pointer-events-none.
 iconPosition'left | right'The position of the icon. Only applies if an icon is provided.
 disableAnimationbooleanDisables the animation on hover that rotates the text.
 iconReactNodeThe icon to be rendered inside the button. Can be used with or without children. If used without children, it renders an icon button and requires an aria-label for accessibility reasons.

<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
PropTypeDescription
afterClassstringAdditional class names that are added to the element after the rotation. This can be used to add additional styles to the button when it is hovered.