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.
npm install @licuido-ui/ui_uploadbuttonThe 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 Narayanamoorthi
``sh`
npm i @licuido-ui/ui_uploadbutton
`jsx`
import { UploadButton } from '@licuido-ui/ui_uploadbutton';
`jsx`
| 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<ButtonBaseClasses> & Partial<ClassNameMap<never>> | - | 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<HTMLButtonElement> | - | Function |
| action | A ref for imperative actions. |
| It currently only supports focusVisible() action.Ref<ButtonBaseActions> | - | 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<any> | 'a' | Set object |
| onFocusVisible | Callback fired when the component is focused with a keyboard. |
| We trigger a onFocus callback too.FocusEventHandler<any> | - | Function |
| sx | The system prop that allows defining system overrides as well as additional CSS styles.SxProps<Theme> | - | Set object |
| TouchRippleProps | Props applied to the TouchRipple element.Partial<TouchRippleProps> | - | Set object |
| touchRippleRef | A ref that points to the TouchRipple element.Ref<TouchRippleActions> | - | 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<{}> | - | Set object |
| inputProps | file type | - | object |()=> undefinded
| onFileChange | upload file on change event | | Function` |