---
title: Buttons
sidebar_position: 1
sidebar_custom_props:
  icon: TbSquareRoundedPlusFilled
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import buttonCode from '!!raw-loader!@site/src/ui/input/button/buttonCode.js'
import buttonGroupCode from '!!raw-loader!@site/src/ui/input/button/buttonGroupCode.js'
import floatingButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonCode.js'
import floatingButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingButtonGroupCode.js'
import floatingIconButtonCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonCode.js'
import floatingIconButtonGroupCode from '!!raw-loader!@site/src/ui/input/button/floatingIconButtonGroupCode.js'
import lightButtonCode from '!!raw-loader!@site/src/ui/input/button/lightButtonCode.js'
import lightIconButtonCode from '!!raw-loader!@site/src/ui/input/button/lightIconButtonCode.js'
import mainButtonCode from '!!raw-loader!@site/src/ui/input/button/mainButtonCode.js'
import roundedIconButtonCode from '!!raw-loader!@site/src/ui/input/button/roundedIconButtonCode.js'

A list of buttons and button groups used throughout the app. 

## Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/Button']}
  componentCode={buttonCode} 
/>
</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional class name for additional styling</td>
      <td></td>
    </tr>

    <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
      <td></td>
    </tr>

    <tr>
      <td>title</td>
      <td>string</td>
      <td>The text content of the button</td>
      <td></td>
    </tr>

    <tr>
      <td>fullWidth</td>
      <td>boolean</td>
      <td>Defines whether the button should span the whole width of its container</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>variant</td>
      <td>string</td>
      <td>The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary`</td>
      <td>primary</td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
      <td>medium</td>
    </tr>

    <tr>
      <td>position</td>
      <td>string</td>
      <td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
      <td>standalone</td>
    </tr>

    <tr>
      <td>accent</td>
      <td>string</td>
      <td>The accent color of the button. Options include: `default`, `blue`, and `danger`</td>
      <td>default</td>
    </tr>

    <tr>
      <td>soon</td>
      <td>boolean</td>
      <td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>Specifies whether button is disabled or not</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>focus</td>
      <td>boolean</td>
      <td>Determines if the button has focus</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>onClick</td>
      <td>function</td>
      <td>A callback function that triggers when the user clicks on the button</td>
      <td></td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Button Group

<Tabs>
<TabItem value="usage" label="Usage" default>
<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/Button', '@/ui/input/button/components/ButtonGroup']}
  componentCode={buttonGroupCode} 
/>
</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>variant</td>
      <td>string</td>
      <td>The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary`</td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the buttons within the group. Has two options: `medium` and `small`</td>
    </tr>

    <tr>
      <td>accent</td>
      <td>string</td>
      <td>The accent color of the buttons within the group. Options include `default`, `blue` and `danger`</td>
    </tr>

    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional class name for additional styling</td>
    </tr>

    <tr>
      <td>children</td>
      <td>ReactNode</td>
      <td>An array of React elements representing the individual buttons within the group</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>


## Floating Button 

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/FloatingButton']}
  componentCode={floatingButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional name for additional styling</td>
      <td></td>
    </tr>

    <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
      <td></td>
    </tr>

    <tr>
      <td>title</td>
      <td>string</td>
      <td>The text content of the button</td>
      <td></td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
      <td>small</td>
    </tr>

    <tr>
      <td>position</td>
      <td>string</td>
      <td>The position of the button in relation to its sublings. Options include: `standalone`, `left`, `middle`, `right`</td>
      <td></td>
    </tr>

    <tr>
      <td>applyShadow</td>
      <td>boolean</td>
      <td>Determines whether to apply shadow to a button</td>
      <td>`true`</td>
    </tr>

    <tr>
      <td>applyBlur</td>
      <td>boolean</td>
      <td>Determines whether to apply a blur effect to the button</td>
      <td>`true`</td>
    </tr>

    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>Determines whether the button is disabled</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>focus</td>
      <td>boolean</td>
      <td>Indicates if the button has focus</td>
      <td>`false`</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Floating Button Group

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/FloatingButton', '@/ui/input/button/components/FloatingButtonGroup']}
  componentCode={floatingButtonGroupCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
      <td>small</td>
    </tr>

    <tr>
      <td>children</td>
      <td>ReactNode</td>
      <td>An array of React elements representing the individual buttons within the group</td>
      <td></td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Floating Icon Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/FloatingIconButton']}
  componentCode={floatingIconButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional name for additional styling</td>
      <td></td>
    </tr>

    <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
      <td></td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
      <td>small</td>
    </tr>

    <tr>
      <td>position</td>
      <td>string</td>
      <td>The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle`</td>
      <td>standalone</td>
    </tr>

    <tr>
      <td>applyShadow</td>
      <td>boolean</td>
      <td>Determines whether to apply shadow to a button</td>
      <td>`true`</td>
    </tr>

    <tr>
      <td>applyBlur</td>
      <td>boolean</td>
      <td>Determines whether to apply a blur effect to the button</td>
      <td>`true`</td>
    </tr>    

    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>Determines whether the button is disabled</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>focus</td>
      <td>boolean</td>
      <td>Indicates if the button has focus</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>onClick</td>
      <td>function</td>
      <td>A callback function that triggers when the user clicks on the button</td>
      <td></td>
    </tr>

    <tr>
      <td>isActive</td>
      <td>boolean</td>
      <td>Determines if the button is in an active state</td>
      <td></td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Floating Icon Button Group

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/FloatingIconButtonGroup']}
  componentCode={floatingIconButtonGroupCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional name for additional styling</td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
    </tr>

    <tr>
      <td>iconButtons</td>
      <td>array</td>
      <td>An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not.</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Light Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/LightButton']}
  componentCode={lightButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional name for additional styling</td>
      <td></td>
    </tr>

    <tr>
      <td>icon</td>
      <td>`React.ReactNode`</td>
      <td>The icon you want to display in the button</td>
      <td></td>
    </tr>

    <tr>
      <td>title</td>
      <td>string</td>
      <td>The text content of the button</td>
      <td></td>
    </tr>

    <tr>
      <td>accent</td>
      <td>string</td>
      <td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
      <td>secondary</td>
    </tr>

    <tr>
      <td>active</td>
      <td>boolean</td>
      <td>Determines if the button is in an active state</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>Determines whether the button is disabled</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>focus</td>
      <td>boolean</td>
      <td>Indicates if the button has focus</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>onClick</td>
      <td>function</td>
      <td>A callback function that triggers when the user clicks on the button</td>
      <td></td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Light Icon Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/LightIconButton']}
  componentCode={lightIconButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>className</td>
      <td>string</td>
      <td>Optional name for additional styling</td>
      <td></td>
    </tr>

    <tr>
      <td>testId</td>
      <td>string</td>
      <td>Test identifier for the button</td>
      <td></td>
    </tr>

    <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
      <td></td>
    </tr>

    <tr>
      <td>title</td>
      <td>string</td>
      <td>The text content of the button</td>
      <td></td>
    </tr>

    <tr>
      <td>size</td>
      <td>string</td>
      <td>The size of the button. Has two options: `small` and `medium`</td>
      <td>small</td>
    </tr>

    <tr>
      <td>accent</td>
      <td>string</td>
      <td>The accent color of the button. Options include: `secondary` and `tertiary`</td>
      <td>secondary</td>
    </tr>

    <tr>
      <td>active</td>
      <td>boolean</td>
      <td>Determines if the button is in an active state</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>Determines whether the button is disabled</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>focus</td>
      <td>boolean</td>
      <td>Indicates if the button has focus</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>onClick</td>
      <td>function</td>
      <td>A callback function that triggers when the user clicks on the button</td>
      <td></td>
    </tr>
   

  </tbody>
</table>

</TabItem>

</Tabs>

## Main Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/MainButton']}
  componentCode={mainButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>title</td>
      <td>string</td>
      <td>The text content of the button</td>
      <td></td>
    </tr>

    <tr>
      <td>fullWidth</td>
      <td>boolean</td>
      <td>efines whether the button should span the whole width of its container</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>variant</td>
      <td>string</td>
      <td>The visual style variant of the button. Options include `primary` and `secondary`</td>
      <td>primary</td>
    </tr>

    <tr>
      <td>soon</td>
      <td>boolean</td>
      <td>Indicates if the button is marked as "soon" (such as for upcoming features)</td>
      <td>`false`</td>
    </tr>

     <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
      <td></td>
    </tr> 

     <tr>
      <td>React `button` props</td>
      <td>`React.ComponentProps<'button'>`</td>
      <td>Additional props from React's `button` element</td>
      <td></td>
    </tr>     

  </tbody>
</table>

</TabItem>

</Tabs>

## Rounded Icon Button

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/button/components/RoundedIconButton']}
  componentCode={roundedIconButtonCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
     <tr>
      <td>Icon</td>
      <td>`React.ComponentType`</td>
      <td>An optional icon component that's displayed within the button</td>
    </tr> 

     <tr>
      <td>React `button` props</td>
      <td>`React.ButtonHTMLAttributes<HTMLButtonElement>`</td>
      <td>Additional props from React's `button` element</td>
    </tr>   

  </tbody>
</table>
</TabItem>

</Tabs>