npm package: @licuido-ui/ui_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: 1.0.1

# Button

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

## Installation

```sh
npm i @licuido-ui/ui_button
```

## Import component

```jsx
import { Button } from '@licuido-ui/ui_button';
```

## Usage

```jsx
<Button>button</Button>
```

## Props

| **Name**                                                                                      | **Description**                                                                                                                                                                                                                                                                                                                                                      | **Default** | **Control**                                                    |
| --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
| **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.                                                                                                                                                                                                                                                                                                                                        |
| It currently only supports focusVisible() action.Ref&lt;ButtonBaseActions&gt;                 | -                                                                                                                                                                                                                                                                                                                                                                    | 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                                                                                                                                                                                                                                                 |
| to highlight the element by applying separate styles with the .Mui-focusVisible class.boolean | false                                                                                                                                                                                                                                                                                                                                                                | 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.                                                                                                                                                                                                                                                                                                        |
| We trigger a onFocus callback too.FocusEventHandler&lt;any&gt;                                | -                                                                                                                                                                                                                                                                                                                                                                    | 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                                                     |