Button 按钮 #

常用的操作按钮。

主要按钮 #

用于整个页面需要关注优先级最高的操作,引导用户关注并操作。

使用type属性来定义 Button 的样式。

主要按钮 激活状态 危险状态 禁用状态

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLXdoaXRle2NvbG9yOnZhcigtLWtkLWNvbG9yLWljb24td2hpdGUsI2ZmZmZmZil9PC9zdHlsZT48ZyBjbGFzcz0ia2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciBrZC1jb2xvci1pY29uLXdoaXRlIj48cGF0aCBkPSJNOCAxNEM5LjA5Mjg2IDE0IDEwLjExNzUgMTMuNzA3OCAxMSAxMy4xOTczIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNpY29uLTY1ZTM5Yjg2OTFkZjY0YjIpIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PC9nPjxnIGNsYXNzPSJrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIGtkLWNvbG9yLWljb24td2hpdGUiPjxwYXRoIGQ9Ik04IDJDMTEuMzEzNyAyIDE0IDQuNjg2MyAxNCA3Ljk5OTk2QzE0IDEwLjIyMDggMTIuNzkzNCAxMi4xNTk4IDExIDEzLjE5NzMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNpY29uLTY1ZTM5Yjg2OTFkZjY0YjIpIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PGRlZnM+PGxpbmVhcmdyYWRpZW50IGlkPSJpY29uLTY1ZTM5Yjg2OTFkZjY0YjIiIHgxPSI4IiB5MT0iMTIiIHgyPSI4IiB5Mj0iMyIgZ3JhZGllbnR1bml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJjdXJyZW50Q29sb3IiIHN0b3Atb3BhY2l0eT0iMC41Ij48L3N0b3A+PC9saW5lYXJncmFkaWVudD48L2RlZnM+PC9nPjxnIGNsYXNzPSJrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIGtkLWNvbG9yLWljb24td2hpdGUiPjxwYXRoIGQ9Ik04IDJDNC42ODYyOSAyIDIgNC42ODYzIDIgOEMyIDExLjMxMzcgNC42ODYyOSAxNCA4IDE0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjaWNvbi02NWUzOWI4NmNiYzljMjJjKSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPjxkZWZzPjxsaW5lYXJncmFkaWVudCBpZD0iaWNvbi02NWUzOWI4NmNiYzljMjJjIiB4MT0iNy41IiB5MT0iMTQiIHgyPSI4IiB5Mj0iMyIgZ3JhZGllbnR1bml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIiBzdG9wLW9wYWNpdHk9IjAiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImN1cnJlbnRDb2xvciIgc3RvcC1vcGFjaXR5PSIwLjUiPjwvc3RvcD48L2xpbmVhcmdyYWRpZW50PjwvZGVmcz48L2c+PC9zdmc+)

加载中

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeXtmaWxsOnZhcigtLWtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5LCMyNjYxQkYpO3N0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwjMjY2MUJGKX08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSA0LjVWMkM5LjUgMS43MjM4NiA5LjI3NjE0IDEuNSA5IDEuNUgyQzEuNzIzODYgMS41IDEuNSAxLjcyMzg2IDEuNSAyVjExQzEuNSAxMS4yNzYxIDEuNzIzODYgMTEuNSAyIDExLjVINi41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSBrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIj48cGF0aCBkPSJNMTEgNC41SDdDNi43MjM4NiA0LjUgNi41IDQuNzIzODYgNi41IDVWMTRDNi41IDE0LjI3NjEgNi43MjM4NiAxNC41IDcgMTQuNUgxNEMxNC4yNzYxIDE0LjUgMTQuNSAxNC4yNzYxIDE0LjUgMTRWOEwxMSA0LjVaIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PHBhdGggZD0iTTEwLjUgNC41VjhDMTAuNSA4LjI3NjE0IDEwLjcyMzkgOC41IDExIDguNUgxNC41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjwvc3ZnPg==)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgMi41TDYuNSAxMy41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz48cGF0aCBkPSJNMTEuNSA0TDE0LjI3NSA3LjcwMDAxQzE0LjQwODMgNy44Nzc3OSAxNC40MDgzIDguMTIyMjQgMTQuMjc1IDguMzAwMDFMMTEuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PHBhdGggZD0iTTQuNSA0TDEuNzI1IDcuNzAwMDFDMS41OTE2NyA3Ljg3Nzc5IDEuNTkxNjcgOC4xMjIyNCAxLjcyNSA4LjMwMDAxTDQuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PC9nPjwvc3ZnPg==)

次要按钮 #

在视觉强调程度上弱于主要按钮,常与主要按钮搭配成组使用。

使用type属性来定义 Button 的样式。

次要按钮 激活状态 强调状态 强调&激活状态 危险状态 禁用状态

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLWluZm97Y29sb3I6dmFyKC0ta2QtY29sb3ItaWNvbi1pbmZvLCMxRjY5RTApfTwvc3R5bGU+PGcgY2xhc3M9ImtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIga2QtY29sb3ItaWNvbi1pbmZvIj48cGF0aCBkPSJNOCAxNEM4LjM0MDcxIDE0IDguNjc0NzkgMTMuOTcxNiA5IDEzLjkxNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPjwvZz48ZyBjbGFzcz0ia2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciBrZC1jb2xvci1pY29uLWluZm8iPjxwYXRoIGQ9Ik04IDE0QzExLjMxMzcgMTQgMTQgMTEuMzEzNyAxNCA3Ljk5OTk2QzE0IDQuNjg2MyAxMS4zMTM3IDIgOCAyIiBzdHJva2U9InVybCgjaWNvbi0zNTgyZmEyNjQ3MGE2NDE5KSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPjxkZWZzPjxsaW5lYXJncmFkaWVudCBpZD0iaWNvbi0zNTgyZmEyNjQ3MGE2NDE5IiB4MT0iOCIgeTE9IjEyIiB4Mj0iOCIgeTI9IjMiIGdyYWRpZW50dW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImN1cnJlbnRDb2xvciI+PC9zdG9wPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIiBzdG9wLW9wYWNpdHk9IjAuNSI+PC9zdG9wPjwvbGluZWFyZ3JhZGllbnQ+PC9kZWZzPjwvZz48ZyBjbGFzcz0ia2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciBrZC1jb2xvci1pY29uLWluZm8iPjxwYXRoIGQ9Ik04IDJDNC42ODYyOSAyIDIgNC42ODYzIDIgOEMyIDExLjMxMzcgNC42ODYyOSAxNCA4IDE0IiBzdHJva2U9InVybCgjaWNvbi0zNTgyZmEyNjZkMDU1ZmVhKSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAvPjxkZWZzPjxsaW5lYXJncmFkaWVudCBpZD0iaWNvbi0zNTgyZmEyNjZkMDU1ZmVhIiB4MT0iNy41IiB5MT0iMTQiIHgyPSI4IiB5Mj0iMyIgZ3JhZGllbnR1bml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIiBzdG9wLW9wYWNpdHk9IjAiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImN1cnJlbnRDb2xvciIgc3RvcC1vcGFjaXR5PSIwLjUiPjwvc3RvcD48L2xpbmVhcmdyYWRpZW50PjwvZGVmcz48L2c+PC9zdmc+)

加载中

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)

轻浅按钮 #

默认状态下视觉上较轻量。