Button

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

Author

• @author Hariharan [email protected]

Link

Story Book Link Button

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_basic-button

Import component

import { BasicButton } from '@licuido-ui/ui_basic-button';

Usage

<BasicButton>button</BasicButton>

Image

Sample Code

<BasicButton
  id={''}
  type={'button'}
  name={''}
  onClick={undefined}
  inLineStyles={{}}
  size={'medium'}
  variant={'contained'}
  color={'primary'}
  children={null}
  className={'button'}
  disabled={false}
  href={''}
>
  button
</BasicButton>

Props

| Name | Description | Default | Control | | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- | | id | This id unique and Used to run BDD test , Its also applied for "data-testid" | - | string | | 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. | 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 | 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. | 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 |