Button

Default Button


    const ButtonExample = () =>
      <Button>BUTTON</Button>;

Button with icon


    const ButtonExample = () =>
      <Button>
        <ButtonIcon>👍</ButtonIcon>BUTTON
      </Button>;

Animated Button

slide


    const ButtonExample = () =>
      <Button
        animationProps={{
          hover: {
            key: 'slide',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Button>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

squeeze


    const ButtonExample = () =>
      <Button
        animationProps={{
          hover: {
            key: 'squeeze',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Button>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

bgColorFade


    const ButtonExample = () =>
      <Button
        animationProps={{
          hover: {
            key: 'bgColorFade',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Button>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

shake


    const ButtonExample = () =>
      <Button
        animationProps={{
          hover: {
            key: 'shake',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Button>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s