---
title: Buttons overview
description: A collection of buttons for call to actions.
author: harimanok_
---

import WorkButton from "@/animata/button/work-button";
import ShiningButton from "@/animata/button/shining-button";
import ArrowButton from "@/animata/button/arrow-button";
import SwipeButton from "@/animata/button/swipe-button";
import GetStartedButton from "@/animata/button/get-started-button";
import ExternalLinkButton from "@/animata/button/external-link-button";
import AlgoliaButtonWhite from "@/animata/button/algolia-white-button";
import AlgoliaButtonBlue from "@/animata/button/algolia-blue-button";
import Duolingo from "@/animata/button/duolingo";
import SlideArrowButton from "@/animata/button/slide-arrow-button";

<ComponentList>
  <ComponentListItem copyId="work-button">
    <WorkButton />
    ```tsx file=<rootDir>/animata/button/work-button.tsx copyId="work-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="shining-button">
    <ShiningButton />
    ```tsx file=<rootDir>/animata/button/shining-button.tsx copyId="shining-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="arrow-button">
    <ArrowButton />
    ```tsx file=<rootDir>/animata/button/arrow-button.tsx copyId="arrow-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="swipe-button">
    <SwipeButton />
    ```tsx file=<rootDir>/animata/button/swipe-button.tsx copyId="swipe-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="external-link-button">
    <ExternalLinkButton />
    ```tsx file=<rootDir>/animata/button/external-link-button.tsx copyId="external-link-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="get-started-button">
    <GetStartedButton />
    ```tsx file=<rootDir>/animata/button/get-started-button.tsx copyId="get-started-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="algolia-white-button">
    <AlgoliaButtonWhite />
    ```tsx file=<rootDir>/animata/button/algolia-white-button.tsx copyId="algolia-white-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="algolia-blue-button">
    <AlgoliaButtonBlue />
    ```tsx file=<rootDir>/animata/button/algolia-blue-button.tsx copyId="algolia-blue-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="duolingo">
    <Duolingo />
    ```tsx file=<rootDir>/animata/button/duolingo.tsx copyId="duolingo"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="ai-button" lazy>
    ```tsx file=<rootDir>/animata/button/ai-button.tsx copyId="ai-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="status-button" lazy>
    ```tsx file=<rootDir>/animata/button/status-button.tsx copyId="status-button"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="slide-arrow-button" lazy>
    <SlideArrowButton text="Get Started"/>
    ```tsx file=<rootDir>/animata/button/slide-arrow-button.tsx copyId="slide-arrow-button"

    ````

  </ComponentListItem>
</ComponentList>
