Button

Basic usage

<Button
  padding={'12px 24px'}
  $backgroundColor={'#5cb4f6'}
  color={'white'}
  border={'none'}
  $borderRadius={'6px'}
  margin={'0 10px 0 0'}
  $hoverBackgroundColor={'blue'}
  hoverColor={'#eeeeee'}
>
  <Text fontSize={15} fontWeight={600}>
    Click me
  </Text>
</Button>
<Button
  padding={'12px 24px'}
  $backgroundColor={'#5cb4f6'}
  color={'white'}
  border={'none'}
  $borderRadius={'6px'}
  $disabledBackgroundColor={'#cccccc'}
  disabled
>
  disabled
</Button>

<Button
  padding={'12px 24px'}
  $backgroundColor={'#5cb4f6'}
  color={'white'}
  border={'none'}
  $borderRadius={'6px'}
  margin={'0 10px 0 0'}
  $hoverBackgroundColor={'blue'}
  hoverColor={'#eeeeee'}
>
  <Text fontSize={15} fontWeight={600}>
    Click me
  </Text>
</Button>
<Button
  padding={'12px 24px'}
  $backgroundColor={'#5cb4f6'}
  color={'white'}
  border={'none'}
  $borderRadius={'6px'}
  $disabledBackgroundColor={'#cccccc'}
  disabled
>
  disabled
</Button>

Props

border

string

$backgroundColor

string

color

string

padding

string

margin

string

$borderRadius

string

$boxShadow

string

$hoverColor

string

$hoverBackgroundColor

string

$disabledColor

string

$disabledBackgroundColor

string

href

string

target

string & HTMLAttributeAnchorTarget

onClick

MouseEventHandler<HTMLElement>

htmlType

"button" | "submit" | "reset"

Why use $

Can refer to https://juejin.cn/post/7109726822622822436

Button

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Props

Why use $

Basic usage