Button Basic usage Mode Outlined Disabled Loading Checkbox Code preview Dialog Form Icon Input Layout Masked input Pagination Radio Rating Readme Switch Table Tabs Tooltip

Button

import { Form } from 'daybreak';

Basic usage

<Button>Basic</Button><Button>Basic</Button>

Mode

the mode prop determine the appearance of the button, the default value of mode is normal.

mode 属性决定按钮的外观，mode 的默认值为 normal。

<Button mode="primary">Enter</Button>
<Button mode="danger">Leave</Button>
<Button mode="normal">Cancel</Button><Button mode="primary">Enter</Button>
<Button mode="danger">Leave</Button>
<Button mode="normal">Cancel</Button>

Outlined

<Button outlined>Enter</Button>
<Button outlined mode="danger">
  Leave
</Button><Button outlined>Enter</Button>
<Button outlined mode="danger">
  Leave
</Button>

Disabled

<Button disabled>Enter</Button><Button disabled>Enter</Button>

Loading

() => {
  const [loading, setLoading] = useState(false)
  return (
    <Button loading={loading} onClick={() => setLoading(!loading)}>
      Click to Load
    </Button>
  )
}() => {
  const [loading, setLoading] = useState(false)
  return (
    <Button loading={loading} onClick={() => setLoading(!loading)}>
      Click to Load
    </Button>
  )
}

Button

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

Mode

Outlined

Disabled

Loading

Basic usage