1.0.1 • Published 8 months ago
@licuido-ui/ui_button v1.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
npm i @licuido-ui/ui_buttonImport component
import { Button } from '@licuido-ui/ui_button';Usage
<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<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 |
1.0.1
8 months ago