Component - Button

[KevinTss]

Button

Specifications

• Should render a <button> HTML element
• There are 2 sizes: small and medium
• There are 3 variants: default, primary, secondary
  • Default: Has transparent background and only a visible background on hover
  • Primary: Has the primary color
  • Secondary: Has an opacity on the background and no primary color
• Color

Helpers

button {
  /* Small size */
  padding: 10px 24px;
  gap: 10px;

  /* Medium size */
  padding: 10px 32px;
  gap: 16px;

  /* Default variant */
  background: #295BF6;
  /* On hover for default */
  background: rgba(255, 255, 255, 0.1);

  /* Secondary variant */
  background: rgba(255, 255, 255, 0.1);

  /* Common */
  border-radius: 8px;
  color: #FFFFFF;
}

We should use it as this:

import { Button } form '...'

const Component = () => (
  <div>
    <Button onClick={...}>
      Discover more
      <RightArrowIcon />
    </Button>
  </div>
)

Images

[sebherrerabe]

Is there a reason you mentioned 3 differents variants in the description and then in the helper you only put 2 ?

[KevinTss]

Is there a reason you mentioned 3 differents variants in the description and then in the helper you only put 2 ?

You're right is not clear

Here are the 3 variants:

As you can see on the top menu is the default variant -> Transparent background (secondary background on hover)
On the header your can see those:
Primary -> Purple like background
Secondary -> Grey like background