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_button

Import 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 |