## mo-button > 按鈕類。 每個類均可單獨使用，樣式類（包括圓角）和尺寸類可混用 （如需要添加一個大尺寸的主色調按鈕則需要使用 `class="mo-button--primary mo-button--large"`混合使用）。 如果要禁用按鈕，只需要給按鈕添加`disabled`屬性 ### api | className | 描述 | 備注 | | --- | --- | --- | | `mo-button` | 默認樣式 | `height: 34px` | | `mo-button--primary` | 主色調 | `#0275d8` | | `mo-button--negative` | 消極色 | `#5cb85c` | | `mo-button--positive` | 積極色 | `#d9534f` | | `mo-button--fluid` | 自適應寬度 | `width:100%` | | `mo-button--radius` | 小圓角 | `border-radius: 2px` | | `mo-button--pill` | 大圓角 | `border-radius: 200px` | | `mo-button--small` | 小尺寸 | `height: 30px` | | `mo-button--large` | 大尺寸 | `height: 44px` | | `mo-button--link` | 按鈕式鏈接 | 無邊框和背景色 | ### demo ``` html <button class="mo-button">default button</button> <button class="mo-button--primary">primary button</button> <button class="mo-button--primary mo-button--large">large primary button</button> <button class="mo-button--primary mo-button--pill">pill primary button</button> <button class="mo-button--primaryl" disabled>disabled primary button</button> ``` ### 自定義按鈕 ``` scss @import './mixins/button'; //自定義樣式（背景，顏色） .mo-button--[style] { @include buttonStyle($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor); } //自定義尺寸 $my-button-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; .mo-button--[size] { @include buttonSize ($my-button-size ); } ```