Button 按钮
按钮用于开始一个即时操作。
何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
类型
类型 type：solid、outline、soft、default、text、link、underline
代码
<Space><Button type='solid'>solid</Button><Button type='outline'>outline</Button><Button type='soft'>soft</Button><Button type='default'>default</Button><Button type='text'>text</Button><Button type='link'>link</Button><Button type='underline'>underline</Button></Space>
禁用状态
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
代码
<Space><Button disabled type='solid'>solid</Button><Button disabled type='outline'>outline</Button><Button disabled type='soft'>soft</Button><Button disabled type='default'>default</Button><Button disabled type='text'>text</Button><Button disabled type='link'>link</Button><Button disabled type='underline'>underline</Button></Space>
尺寸
通过 size 可以设置尺寸，默认 md，可选 xs, sm, md, lg, xl
代码
<Space align='center'><Button size='xs'>xs</Button><Button size='sm'>sm</Button><Button size='md'>md</Button><Button size='lg'>lg</Button><Button size='xl'>xl</Button></Space>
通过 style 可以自定义尺寸
代码
<Button style={{ minWidth: '100px', height: '40px' }}>连接</Button>
Solid 颜色
预定义的按钮颜色，更多颜色可以通过 style 去设置。
代码
<Space wrap><Button type='solid' color='black'>black</Button><Button type='solid' color='slate'>slate</Button><Button type='solid' color='gray'>gray</Button><Button type='solid' color='zinc'>zinc</Button><Button type='solid' color='neutral'>neutral</Button><Button type='solid' color='stone'>stone</Button><Button type='solid' color='red'>red</Button><Button type='solid' color='orange'>orange</Button><Button type='solid' color='amber'>amber</Button><Button type='solid' color='yellow'>yellow</Button><Button type='solid' color='lime'>lime</Button><Button type='solid' color='green'>green</Button><Button type='solid' color='emerald'>emerald</Button><Button type='solid' color='teal'>teal</Button><Button type='solid' color='cyan'>cyan</Button><Button type='solid' color='sky'>sky</Button><Button type='solid' color='blue'>blue</Button><Button type='solid' color='indigo'>indigo</Button><Button type='solid' color='violet'>violet</Button><Button type='solid' color='purple'>purple</Button><Button type='solid' color='fuchsia'>fuchsia</Button><Button type='solid' color='pink'>pink</Button><Button type='solid' color='rose'>rose</Button><Button type='solid' color='white'>white</Button></Space>
Outline 颜色
预定义的按钮颜色，更多颜色可以通过 style 去设置。
代码
<Space wrap><Button type='outline' color='black'>black</Button><Button type='outline' color='slate'>slate</Button><Button type='outline' color='gray'>gray</Button><Button type='outline' color='zinc'>zinc</Button><Button type='outline' color='neutral'>neutral</Button><Button type='outline' color='stone'>stone</Button><Button type='outline' color='red'>red</Button><Button type='outline' color='orange'>orange</Button><Button type='outline' color='amber'>amber</Button><Button type='outline' color='yellow'>yellow</Button><Button type='outline' color='lime'>lime</Button><Button type='outline' color='green'>green</Button><Button type='outline' color='emerald'>emerald</Button><Button type='outline' color='teal'>teal</Button><Button type='outline' color='cyan'>cyan</Button><Button type='outline' color='sky'>sky</Button><Button type='outline' color='blue'>blue</Button><Button type='outline' color='indigo'>indigo</Button><Button type='outline' color='violet'>violet</Button><Button type='outline' color='purple'>purple</Button><Button type='outline' color='fuchsia'>fuchsia</Button><Button type='outline' color='pink'>pink</Button><Button type='outline' color='rose'>rose</Button><Button type='outline' color='white'>white</Button></Space>
Soft 颜色
预定义的按钮颜色，更多颜色可以通过 style 去设置。
代码
<Space wrap><Button type='soft' color='black'>black</Button><Button type='soft' color='slate'>slate</Button><Button type='soft' color='gray'>gray</Button><Button type='soft' color='zinc'>zinc</Button><Button type='soft' color='neutral'>neutral</Button><Button type='soft' color='stone'>stone</Button><Button type='soft' color='red'>red</Button><Button type='soft' color='orange'>orange</Button><Button type='soft' color='amber'>amber</Button><Button type='soft' color='yellow'>yellow</Button><Button type='soft' color='lime'>lime</Button><Button type='soft' color='green'>green</Button><Button type='soft' color='emerald'>emerald</Button><Button type='soft' color='teal'>teal</Button><Button type='soft' color='cyan'>cyan</Button><Button type='soft' color='sky'>sky</Button><Button type='soft' color='blue'>blue</Button><Button type='soft' color='indigo'>indigo</Button><Button type='soft' color='violet'>violet</Button><Button type='soft' color='purple'>purple</Button><Button type='soft' color='fuchsia'>fuchsia</Button><Button type='soft' color='pink'>pink</Button><Button type='soft' color='rose'>rose</Button><Button type='soft' color='white'>white</Button></Space>
形状
shape 支持 circle，round, square, 默认为 round。
代码
<Space><Button type='solid' shape='circle'>circle</Button><Button type='solid' shape='round'>round</Button><Button type='solid' shape='square'>square</Button></Space>
Block
通过 block 属性使按钮铺满其父容器。
代码
<Space vertical><Button type='solid' block>Button</Button><Button type='default' block>Button</Button></Space>
图标
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，则只能直接使用 Icon 组件。
代码
<Space><Button type='solid' icon={<SettingFilled />}>设置</Button><Button type='default' icon={<SettingFilled />}>设置</Button></Space>
通过 icon 属性设置图标并且没有 children，则可以实现宽高相等。
代码
<Space><Button type='solid' shape='round' icon={<SettingFilled />} /><Button type='solid' shape='circle' icon={<SettingFilled />} /><Button type='solid' shape='square' icon={<SettingFilled />} /></Space>
默认图标是继承字体尺寸
代码
<Space><Button type='solid' size='xs' icon={<SmileOutlined />} /><Button type='solid' size='sm' icon={<SmileOutlined />} /><Button type='solid' size='md' icon={<SmileOutlined />} /><Button type='solid' size='lg' icon={<SmileOutlined />} /><Button type='solid' size='xl' icon={<SmileOutlined />} /></Space>
加载状态
通过 loading 属性设置按钮为加载状态；如果按钮有图标，加载状态下默认会暂时隐藏原有图标。
代码
() => {const [loading, setLoading] = useState(true);return (<Space><Button type='solid' loading={loading} onClick={() => setLoading(!loading)}>{loading ? 'Loading' : 'Click me'}</Button><Button loading={loading} onClick={() => setLoading(!loading)} type='solid' icon={<SettingFilled />}>{loading ? 'Loading' : 'Click me'}</Button><Button loading={loading} onClick={() => setLoading(!loading)} type='soft' icon={<BookmarkFilled />} /></Space>);};