@licuido-ui/ui_basic-button NPM

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 hariharan@crayond.co

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/ui_login @licuido-ui/ui_media-card @licuido-ui/ui_profile @licuido-ui/ui_render-form @licuido-ui/ui_filter @licuido-ui/ui_sign-up @licuido-ui/ui_stepper @licuido-ui/ui_stepper-mobile @licuido-ui/ui_table @licuido-ui/ui_viewer @licuido-ui/react @licuido-ui/ui_billing-payment

0.0.6

8 months ago