### Button [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/fb85f222c375652baa5384692b8f573d6f404962?refName=refs%2Fheads%2Ffeature%2Ftest-v18)

:::warning
避免跳 warning，disabled 需這樣寫 `[attr.disabled]="true"`
> It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
> when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
> you. We recommend using this approach to avoid 'changed after checked' errors.
>
> Example:
> // Specify the `disabled` property at control creation time:
> form = new FormGroup({
> first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
> last: new FormControl('Drew', Validators.required)
> });
>
> // Controls can also be enabled/disabled after creation:
> form.get('first')?.enable();
> form.get('last')?.disable();
:::

### Import
==v14==
需導入 ButtonModule，使用 <button>、directive `pButton` 實現功能。
詳細使用方式請參考 PrimeNG Accordion。 https://v17.primeng.org/button

import { ButtonModule } from 'primeng/button';

==v18==
需導入 ButtonModule，使用 <p-button> 實現功能。
詳細使用方式請參考 PrimeNG Accordion。 https://primeng.org/button

import { ButtonModule } from 'primeng/button';

### Getting Started
添加 .cub-btn 顯示按鈕基本樣式，並可搭配其他色彩樣式。
==v14==

<button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-md mr-8"></button>

==v18==

<p-button label="Button" class="cub-btn cub-btn-primary cub-btn-md mr-8"></p-button>

* 大小（Size）
預設常用按鈕尺寸 96px 與 180px，加上 .cub-btn-md 或 .cub-btn-lg 來套用尺寸

    <p-button label="Button" class="cub-btn cub-btn-primary cub-btn-md"></p-button>

* 停用狀態（Disabled）
將 disabled 屬性添加至 <p-button> 元素，使按鈕處於停用狀態。

      <p-button label="Button" class="cub-btn cub-btn-primary cub-btn-md"  [disabled]="true"></p-button>

### Text Button
==v14==

<div class="cub-font-16 cub-text-gray mt-8">Primary Button</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg" disabled></button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">
  Primary Outline Button（等同 Secondary Button）
</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary-outline cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary-outline cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-primary-outline cub-btn-lg" disabled></button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Special Button</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special cub-btn-lg" disabled></button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Special Outline Button</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special-outline cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special-outline cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-special-outline cub-btn-lg" disabled></button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Warning Button</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger cub-btn-lg" disabled></button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Warning Outline Button</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger-outline cub-btn-md mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger-outline cub-btn-lg mr-8"></button>
  <button pButton type="button" label="Button" class="cub-btn cub-btn-danger-outline cub-btn-lg" disabled></button>
</div>
</div>

==v18==

<div class="cub-font-16 cub-text-gray mt-8">Primary Button</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-primary cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-primary cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-primary cub-btn-lg" [disabled]="true"></p-button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">
  Primary Outline Button（等同 Secondary Button）
</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-primary-outline cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-primary-outline cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-primary-outline cub-btn-lg"  [disabled]="true"></p-button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Special Button</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-special cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-special cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-special cub-btn-lg"  [disabled]="true"></p-button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Special Outline Button</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-special-outline cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-special-outline cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-special-outline cub-btn-lg"  [disabled]="true"></p-button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Warning Button</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-danger cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-danger cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-danger cub-btn-lg"  [disabled]="true"></p-button>
</div>

<div class="cub-font-16 cub-text-gray mt-8">Warning Outline Button</div>
<div class="d-flex flex-wrap">
  <p-button label="Button" class="cub-btn cub-btn-danger-outline cub-btn-md mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-danger-outline cub-btn-lg mr-8"></p-button>
  <p-button label="Button" class="cub-btn cub-btn-danger-outline cub-btn-lg"  [disabled]="true"></p-button>
</div>
</div>

### Text Button with Icon
==v14==

<button pButton type="button" label="批次作業" class="cub-btn cub-btn-secondary mr-8">
    <span class="cub-icon-batch_24"></span>
</button>

<button pButton type="button" label="Icontext" class="cub-btn cub-btn-secondary mr-8">
    <span class="cub-icon-filter_24"></span>
</button>

<button pButton type="button" label="返回審批頁" class="cub-btn cub-btn-secondary" disabled>
    <span class="cub-icon-arrowleft_24"></span>
</button>

==v18==

<p-button label="批次作業" class="cub-btn cub-btn-secondary mr-8">
    <span class="cub-icon-batch_24"></span>    
</p-button>

<p-button label="Icontext" class="cub-btn cub-btn-secondary mr-8">
    <span class="cub-icon-filter_24"></span>
</p-button>

<p-button label="返回審批頁" class="cub-btn cub-btn-secondary"  [disabled]="true">
    <span class="cub-icon-arrowleft_24"></span>
</p-button>

### Square Button（Text with Icon）
==v14==

<button pButton type="button" label="Move" class="cub-btn-square mr-16">
    <span class="cub-icon-move_40_m"></span>
</button>
<button pButton type="button" label="Move" class="cub-btn-square" disabled>
    <span class="cub-icon-move_40_m"></span>
</button>

==v18==

<p-button label="Move" class="cub-btn-square mr-16">
    <span class="cub-icon-move_40_m"></span>
</p-button>
<p-button label="Move" class="cub-btn-square"  [disabled]="true">
    <span class="cub-icon-move_40_m"></span>
</p-button>

### Icon Button
==v14==

<div class="cub-font-14 cub-text-gray mt-8">Icon Font</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" class="cub-btn cub-btn-icon-font">
    <span class="cub-icon-info_18"></span>
  </button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">ToTop</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" class="cub-btn cub-btn-to-top mr-8"></button>
  <button pButton type="button" class="cub-btn cub-btn-to-top" disabled></button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Back</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-arrowleft_24"></span>
  </button>
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-arrowright_24"></span>
  </button>
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon mr-8" disabled>
    <span class="cub-icon-arrowleft_24"></span>
  </button>
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon" disabled>
    <span class="cub-icon-arrowright_24"></span>
  </button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Control_Prev</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-chevronleft_24"></span>
  </button>
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon" disabled>
    <span class="cub-icon-chevronleft_24"></span>
  </button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Control_Next</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-chevronright_24"></span>
  </button>
  <button pButton type="button" icon="pi" class="cub-btn cub-btn-icon" disabled>
    <span class="cub-icon-chevronright_24"></span>
  </button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Close（燈箱使用）</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" class="cub-btn cub-btn-close mr-8"></button>
  <button pButton type="button" class="cub-btn cub-btn-close mr-8" disabled></button>
  <div style="background-color: #4a4a4a">
    <button pButton type="button" class="cub-btn cub-btn-close-lightbox"></button>
  </div>
</div>

<div class="cub-font-14 cub-text-gray mt-8">More</div>
<div class="d-flex flex-wrap mt-8">
  <div class="cub-more">
    <button pButton type="button" class="cub-btn cub-btn-more mr-8" (click)="menu.toggle($event)"></button>
    <p-menu #menu [popup]="true" [model]="items" [appendTo]="'body'"></p-menu>
  </div>
  <div class="cub-more">
    <button pButton type="button" class="cub-btn cub-btn-more" disabled></button>
  </div>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Drag</div>
<div class="d-flex flex-wrap mt-8">
  <button pButton type="button" class="cub-btn cub-btn-drag"></button>
</div>

==v18==

<div class="cub-font-14 cub-text-gray mt-8">Icon Font</div>
<div class="d-flex flex-wrap">
  <p-button class="cub-btn cub-btn-icon-font">
    <span class="cub-icon-info_18"></span>
  </p-button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">ToTop</div>
<div class="d-flex flex-wrap mt-8">
  <p-button class="cub-btn cub-btn-to-top mr-8"></p-button>
  <p-button class="cub-btn cub-btn-to-top"  [disabled]="true"></p-button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Back</div>
<div class="d-flex flex-wrap mt-8">
  <p-button icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-arrowleft_24"></span>
  </p-button>
  <p-button icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-arrowright_24"></span>
  </p-button>
  <p-button icon="pi" class="cub-btn cub-btn-icon mr-8"  [disabled]="true">
    <span class="cub-icon-arrowleft_24"></span>
  </p-button>
  <p-button icon="pi" class="cub-btn cub-btn-icon"  [disabled]="true">
    <span class="cub-icon-arrowright_24"></span>
  </p-button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Control_Prev</div>
<div class="d-flex flex-wrap mt-8">
  <p-button icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-chevronleft_24"></span>
  </p-button>
  <p-button icon="pi" class="cub-btn cub-btn-icon"  [disabled]="true">
    <span class="cub-icon-chevronleft_24"></span>
  </p-button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Control_Next</div>
<div class="d-flex flex-wrap mt-8">
  <p-button icon="pi" class="cub-btn cub-btn-icon mr-8">
    <span class="cub-icon-chevronright_24"></span>
  </p-button>
  <p-button icon="pi" class="cub-btn cub-btn-icon"  [disabled]="true">
    <span class="cub-icon-chevronright_24"></span>
  </p-button>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Close（燈箱使用）</div>
<div class="d-flex flex-wrap mt-8">
  <p-button class="cub-btn cub-btn-close mr-8"></p-button>
  <p-button class="cub-btn cub-btn-close mr-8"  [disabled]="true"></p-button>
  <div style="background-color: #4a4a4a">
    <p-button class="cub-btn cub-btn-close-lightbox"></p-button>
  </div>
</div>

<div class="cub-font-14 cub-text-gray mt-8">More</div>
<div class="d-flex flex-wrap mt-8">
  <div class="cub-more">
    <p-button class="cub-btn cub-btn-more mr-8" (click)="menu.toggle($event)"></p-button>
    <p-menu #menu [popup]="true" [model]="items" [appendTo]="'body'"></p-menu>
  </div>
  <div class="cub-more">
    <p-button class="cub-btn cub-btn-more"  [disabled]="true"></p-button>
  </div>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Drag</div>
<div class="d-flex flex-wrap mt-8">
  <p-button class="cub-btn cub-btn-drag"></p-button>
</div>

### HyperLink
==v14==

<div class="cub-font-14 cub-text-gray mt-8">A Link</div>
<div class="d-flex flex-wrap">
  <a href="javascript:void(0)" class="cub-btn cub-btn-link mr-8">超連結按鈕</a>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Button Link</div>
<div class="d-flex flex-wrap">
  <button pButton type="button" label="超連結按鈕" class="cub-btn cub-btn-link"></button>
</div>

==v18==

<div class="cub-font-14 cub-text-gray mt-8">A Link</div>
<div class="d-flex flex-wrap">
  <a href="javascript:void(0)" class="cub-btn cub-btn-link mr-8">超連結按鈕</a>
</div>

<div class="cub-font-14 cub-text-gray mt-8">Button Link</div>
<div class="d-flex flex-wrap">
  <p-button label="超連結按鈕" class="cub-btn cub-btn-link"></p-button>
</div>

### cub-btn-fixed-group
==v14==

<div class="cub-btn-fixed-group">
    <button pButton type="button" label="返回" class="cub-btn cub-btn-secondary cub-btn-fixed">
      <span class="cub-icon-arrowleft_24"></span>
    </button>
    <button pButton type="button" label="儲存" class="cub-btn cub-btn-secondary cub-btn-fixed">
      <span class="cub-icon-save_24"></span>
    </button>
    <button pButton type="button" label="送出" class="cub-btn cub-btn-special cub-btn-fixed">
      <span class="cub-icon-telegram_24"></span>
    </button>

    <button pButton type="button" label="返回" class="cub-btn cub-btn-secondary cub-btn-fixed" disabled>
      <span class="cub-icon-arrowleft_24"></span>
    </button>
    <button pButton type="button" label="儲存" class="cub-btn cub-btn-secondary cub-btn-fixed" disabled>
      <span class="cub-icon-save_24"></span>
    </button>
    <button pButton type="button" label="送出" class="cub-btn cub-btn-special cub-btn-fixed" disabled>
      <span class="cub-icon-telegram_24"></span>
    </button>
</div>

==v18==

<div class="cub-btn-fixed-group">
    <p-button label="返回" class="cub-btn cub-btn-secondary cub-btn-fixed">
      <span class="cub-icon-arrowleft_24"></span>
    </p-button>
    <p-button label="儲存" class="cub-btn cub-btn-secondary cub-btn-fixed">
      <span class="cub-icon-save_24"></span>
    </p-button>
    <p-button label="送出" class="cub-btn cub-btn-special cub-btn-fixed">
      <span class="cub-icon-telegram_24"></span>
    </p-button>
    <p-button label="返回" class="cub-btn cub-btn-secondary cub-btn-fixed"  [disabled]="true">
      <span class="cub-icon-arrowleft_24"></span>
    </p-button>
    <p-button label="儲存" class="cub-btn cub-btn-secondary cub-btn-fixed"  [disabled]="true">
      <span class="cub-icon-save_24"></span>
    </p-button>
    <p-button label="送出" class="cub-btn cub-btn-special cub-btn-fixed"  [disabled]="true">
      <span class="cub-icon-telegram_24"></span>
    </p-button>
</div>