npm package: @licuido-ui/ui_basic-button
Description: Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.
Latest version: 0.0.6

# Button

Buttons are used as triggers for actions. They are used in forms, toolbars,
dialog footers and as stand-alone action triggers.

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link Button](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_basic-button
```

## Import component

```jsx
import { BasicButton } from '@licuido-ui/ui_basic-button';
```

## Usage

```jsx
<BasicButton>button</BasicButton>
```

## Image

![alt text](./basicButton.png)

## Sample Code

```jsx
<BasicButton
  id={''}
  type={'button'}
  name={''}
  onClick={undefined}
  inLineStyles={{}}
  size={'medium'}
  variant={'contained'}
  color={'primary'}
  children={null}
  className={'button'}
  disabled={false}
  href={''}
>
  button
</BasicButton>
```

## Props

| **Name**                                                    | **Description**                                                                                                                                                                                                                                                                                                                                                      | **Default** | **Control**                                                    |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
| **id**                                                      | This id unique and Used to run BDD test , Its also applied for `"data-testid"`                                                                                                                                                                                                                                                                                       | -           | string                                                         |
| **children**                                                | The content of the component.ReactNode                                                                                                                                                                                                                                                                                                                               | -           | "button"                                                       |
| **className**                                               | string                                                                                                                                                                                                                                                                                                                                                               | "button"    | Set string                                                     |
| **classes**                                                 | Override or extend the styles applied to the component.Partial&lt;ButtonBaseClasses&gt; &amp; Partial&lt;ClassNameMap&lt;never&gt;&gt;                                                                                                                                                                                                                               | -           | Set object                                                     |
| **label**                                                   | string                                                                                                                                                                                                                                                                                                                                                               | -           | Set string                                                     |
| **id**                                                      | string                                                                                                                                                                                                                                                                                                                                                               | ""          | Set string                                                     |
| **tabIndex**                                                | number                                                                                                                                                                                                                                                                                                                                                               | 0           | Set number                                                     |
| **color**                                                   | "inherit""primary""secondary""success""error""info""warning"                                                                                                                                                                                                                                                                                                         | "primary"   | Choose option...inheritprimarysecondarysuccesserrorinfowarning |
| **onClick**                                                 | MouseEventHandler&lt;HTMLButtonElement&gt;                                                                                                                                                                                                                                                                                                                           | -           | Function                                                       |
| **action**                                                  | A ref for imperative actions.                                                                                                                                                                                                                                                                                                                                        | Set object  |
| **centerRipple**                                            | If true, the ripples are centered.                                                                                                                                                                                                                                                                                                                                   |
| They won't start at the cursor interaction position.boolean | false                                                                                                                                                                                                                                                                                                                                                                | Set boolean |
| **disabled**                                                | If true, the component is disabled.boolean                                                                                                                                                                                                                                                                                                                           | false       | Set boolean                                                    |
| **disableRipple**                                           | If true, the ripple effect is disabled.Without a ripple there is no styling for :focus-visible by default. Be sure                                                                                                                                                                                                                                                   | Set boolean |
| **disableTouchRipple**                                      | If true, the touch ripple effect is disabled.boolean                                                                                                                                                                                                                                                                                                                 | false       | Set boolean                                                    |
| **focusRipple**                                             | If true, the base button will have a keyboard focus ripple.boolean                                                                                                                                                                                                                                                                                                   | false       | Set boolean                                                    |
| **focusVisibleClassName**                                   | This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components. if needed.string | -           | Set string                                                     |
| **LinkComponent**                                           | The component used to render a link when the href prop is provided.ElementType&lt;any&gt;                                                                                                                                                                                                                                                                            | 'a'         | Set object                                                     |
| **onFocusVisible**                                          | Callback fired when the component is focused with a keyboard.                                                                                                                                                                                                                                                                                                        | Function    |
| **sx**                                                      | The system prop that allows defining system overrides as well as additional CSS styles.SxProps&lt;Theme&gt;                                                                                                                                                                                                                                                          | -           | Set object                                                     |
| **TouchRippleProps**                                        | Props applied to the TouchRipple element.Partial&lt;TouchRippleProps&gt;                                                                                                                                                                                                                                                                                             | -           | Set object                                                     |
| **touchRippleRef**                                          | A ref that points to the TouchRipple element.Ref&lt;TouchRippleActions&gt;                                                                                                                                                                                                                                                                                           | -           | Set object                                                     |
| **name**                                                    | string                                                                                                                                                                                                                                                                                                                                                               | ""          | Set string                                                     |
| **type**                                                    | "button""submit""reset"                                                                                                                                                                                                                                                                                                                                              | "button"    | buttonsubmitreset                                              |
| **inLineStyles**                                            | CSSProperties                                                                                                                                                                                                                                                                                                                                                        | { }         | Set object                                                     |
| **size**                                                    | "small""medium""large"                                                                                                                                                                                                                                                                                                                                               | "medium"    | smallmediumlarge                                               |
| **variant**                                                 | "text""outlined""contained"                                                                                                                                                                                                                                                                                                                                          | "contained" | textoutlinedcontained                                          |
| **href**                                                    | string                                                                                                                                                                                                                                                                                                                                                               | ""          | Set string                                                     |
| **startIcon**                                               | ReactNode                                                                                                                                                                                                                                                                                                                                                            | -           | Set object                                                     |
| **endIcon**                                                 | ReactNode                                                                                                                                                                                                                                                                                                                                                            | -           | Set object                                                     |
| **component**                                               | string                                                                                                                                                                                                                                                                                                                                                               | -           | Set string                                                     |
| **rootSx**                                                  | SxProps&lt;{}&gt;                                                                                                                                                                                                                                                                                                                                                    | -           | Set object                                                     |