# Deprecated button

-- Used in pagination
-- Used in uploadbutton

# Accessibility

-- .a11y_focused class commented for now in base button.
-- focusClass prop removed in Accessibility docs.


Button

Icon
<span/>

Button1 - (shape)
<button>{children}</button>


Button2 (IconButton)
<button><Icon/>{children}</button>

<button><Icon/><Text/></button>

<TextButton><Icon/></TextButton>


<button>
  <Icon/>
</button>



<>
<button>
  <Icon icon/>
  {children}
  <Icon/>
</button>
</>

<button icon={<></>}>
  {children}
</button>
</>



<IconButton icon size>
icon=()


\*Button3
<button>{children}<span/></button>

<><Button><IconButton></>
<\*DropdownButton/>

Button4
<button><Icon/>text<button></button></button>

<Button2>{Text}<Button></Button2>
<Button3><Icon></Button3>

Button5
<Button3><span></span><span></span></Button3>

Button6
<Button><Icon></Button>

Button7
<a></a> - css sharing?
<Button1><a/></Button1> - customStyle (Not advise)
<a><Button></a> - need to check accessability

(size?,ellipse)

Ant
<Button block danger disabled ghost href htmlType="a|button" icon loading shape size target type="link|text" onClick >
MUI
<Button classes color component disabled disableElevation disableFocusRipple disableRipple endIcon fullWidth href size startIcon sx variant>children</Button>
react spectrum
<Button variant isQuiet type isDisabled children autoFocus href target rel elementType></Button>

TextButton
<Button variant size  color shape  text  textEllipsis focusClass active hoverd disabled onClick renderComponent startIcon endIcon variant customStyle tagAttributes tagGeneralAttributes></Button>

<Button variant size color shape disabled onClick variant customStyle tagAttributes tagGeneralAttributes a11y={focusClass}></Button>

TextButton.module.css
.button{

}
.button:hover{

}
let TextButton=({customStyle})=>{

<Button customStyle={{base:button}} {...buttonProps}>
<Text ellipsis  customStyle={}>{text}</Text>
</Button>
}

TextButton.propTypes={
...ButtonPropTypes,
...
}

<Button>Vimal</Button>


import DeleteIcon from "./DeleteIcon"; 
import PlusIcon from "./PlusIcon";

<IconButton icon={(size)=><DeleteIcon size={size} />} />

<IconButton icon={<DeleteIcon size={sss} />} />

<IconButton icon={PlusIcon} size={10} />
{
    <icon size={} customStyle={{ base: paddion10 }} />
}

<IconButton icon size />

discussion
width - auto discussion in Button. currently we go with size with min-width handling. Text breaks width It is acceptable now
active props needed ? Discussion with PM team

loading - handling is not decided

Button.ariaPropTypes.js
Button.behaviour.js - not needed
Button.constantProps - size removed 2 types, cursor removed, shape - need to add after figma
Button.cssJSLogic - done
Button.customIds - not in plan
Button.js
