npm package: @licuido-ui/ui_uploadbutton
Description: The Upload Button provides a seamless way to initiate file uploads in your application. With a simple click, users can select and upload files effortlessly.
Latest version: 4.0.2

# Upload Button

The Upload Button provides a seamless way to initiate file uploads in your application. With a simple click, users can select and upload files effortlessly.

### Author

- @author Narayanamoorthi <narayana@crayond.co>

## Installation

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

## Import component

```jsx
import { UploadButton } from '@licuido-ui/ui_uploadbutton';
```

## Usage

```jsx
<UploadButton>button</UploadButton>
```

## 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                                                     |
| **inputProps**                                                                                | file type                                                                                                                                                                                                                                                                                                                                                            | `-`               | object                                                         |
| **onFileChange**                                                                              | upload file on change event                                                                                                                                                                                                                                                                                                                                          | `()=> undefinded` | `Function`                                                     |