---
title: Angular Button コンポーネント – Ignite UI for Angular - MITライセンス
description: Ignite UI for Angular Button コンポーネントで規格のボタンに定義済みテキスト、画像、およびその他の機能を追加します。今すぐお試しください。
keywords: Angular Button コンポーネント, Angular Button コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, Angular UI コンポーネント
license: MIT
_language: ja
---

# Angular Button (ボタン) の概要

Angular Button ディレクティブは、アクション可能なボタンを作成して Web ページ/アプリケーションに追加するために使用されます。簡単にカスタマイズでき、いくつかの組み込み機能を含むさまざまな Angular Button タイプがあります。デフォルトでは、AngularMaterial はネイティブの `<button>` および `<a>` 要素を使用して、アクセス可能なエクスペリエンスを提供します。

Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。Flat ボタン、Contained ボタン、Outlined ボタン、FAB (フローティング アクション ボタン) の Angular ボタン タイプを使用できます。カスタマイズ可能な色、テーマを作成して Angular ボタン スタイルを変更するオプション、ユーザーがボタンのサイズを選択できるようにするオプションなどを提供します。

## Angular Button の例

以下の Angular Button の例を作成して、さまざまなボタン タイプが境界線でスタイル設定されている場合、または透明な背景が適用されている場合にどのように表示されるかを示します。

<hr/>

<hr/>

## Ignite UI for Angular Button を使用した作業の開始

Ignite UI for Angular Button ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

```cmd
ng add igniteui-angular
```

Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。

次に、**app.module.ts** ファイルに `IgxButtonModule` をインポートします。

```typescript
// app.module.ts
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonModule,
        ...
    ]
})
export class AppModule {}
```

あるいは、`16.0.0` 以降、`IgxButtonDirective` をスタンドアロンの依存関係としてインポートできます。

```typescript
// home.component.ts

...
// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<button igxButton="flat">Flat</button>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxButtonDirective]
})
export class HomeComponent {}
```

Ignite UI for Angular Button モジュールまたはディレクティブをインポートしたので、要素で `igxButton` ディレクティブの使用を開始できます。

## Angular ボタン タイプ

### Flat ボタン

ディレクティブを使用して、シンプルなフラット ボタンをコンポーネント テンプレートに追加します。タイプを選択しない場合、デフォルト値は `flat` です。

```html
<button igxButton="flat">Flat</button>
```

<DocsAside type="info">
このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
</DocsAside>

### Contained ボタン

Contained ボタンを作成するには、`igxButton` プロパティの値を変更するだけです。

```html
<button igxButton="contained">Contained</button>
```

### Outlined ボタン

同様に、アウトライン タイプに切り替えることができます。

```html
<button igxButton="outlined">Outlined</button>
```

### Icon ボタン

バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](icon-button.md)を参照してください。

```html
<button igxIconButton="flat">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>
```

### FAB (フローティング アクション ボタン)

アイコンを使用して、フローティング アクション ボタンを作成します。

```html
<button igxButton="fab">
  <igx-icon fontSet="material">edit</igx-icon>
</button>
```

拡張 FAB を作成するには、`igx-icon` の前に任意の要素を追加できます。

```html
<button class="btn" igxButton="fab">
  <span>like</span>
  <igx-icon fontSet="material">favorite</igx-icon>
</button>
```

<DocsAside type="info" title="情報">
拡張 FAB テキストを適切にスタイルするには、`<span>` または `<div>` タグを使用します。
</DocsAside>

## 例

### Angular ボタンの無効化

ボタンを無効にするには、`disabled` プロパティを使用します。

```html
<button igxButton="contained" [disabled]="'true'">Disabled</button>
```

### Ripple

ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。

```html
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
  Ripple
</button>
```

### Span

`span` や `div` などの要素を Ignite UI for Angular スタイルのボタンに変更するために `igxButton` ディレクティブを使用できます。デフォルトの色は `igxButtonColor` と `igxButtonBackground` プロパティでカスタマイズできます。

```html
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
  Span
</span>
```

## サイズ

`--ig-size` カスタム CSS プロパティを使用して、ユーザーが `igxButton` のサイズを選択できるようにすることができます。これを行うには、まず `IgxButtonGroupModule` をインポートし、コンポーネントによってサイズ値を表示する必要があります。このようにして、選択されるたびに **--ig-size** CSS プロパティを更新します。

```typescript
// app.module.ts
...
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonGroupModule
        ...
    ]
})
```

```html
<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
```

```typescript
// buttons-density.component.ts
public size = "large";
public sizes;
public ngOnInit() {
    this.sizes = [
        { label: 'large', selected: this.size === 'large', togglable: true },
        { label: 'medium', selected: this.size === 'medium', togglable: true },
        { label: 'small', selected: this.size === 'small', togglable: true }
    ];
}

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}

@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}
```

以下は結果です。

<hr/>

## スタイル設定

### Button テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

<div class="theme-switcher-wrapper">

<input type="radio" name="theme" id="material" defaultChecked/>
<label for="material" class="switch-label">Material</label>
<input type="radio" name="theme" id="fluent"/>
<label for="fluent" class="switch-label">Fluent</label>
<input type="radio" name="theme" id="bootstrap"/>
<label for="bootstrap" class="switch-label">Bootstrap</label>
<input type="radio" name="theme" id="indigo"/>
<label for="indigo" class="switch-label">Indigo</label>
<div class="tables">

  <div class="theme-table material">

### Material Theme

#### Flat Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |

#### Contained Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-background | Focus background color |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $active-background | Active background color |
| | $active-foreground | Active foreground color |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |

#### Outlined Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $border-color | The border color for outlined buttons. |
| | $hover-border-color | The border color for hovered outlined buttons. |
| | $focus-border-color | The border color for focused outlined buttons. |
| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. |
| | $active-border-color | The border color for active outlined buttons. |

#### FAB Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-background | Focus background color |
| | $focus-foreground | Foreground on focus |
| | $active-background | Active background color |
| | $active-foreground | Active foreground color |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |

</div>

<div class="theme-table fluent">

### Fluent Theme

#### Flat Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |

#### Contained Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $focus-background | Focus background color |
| | $active-background | Active background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-foreground | Foreground on focus |
| | $active-foreground | Active foreground color |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |

#### Outlined Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered outlined button. |
| | $focus-background | Background color for focused outlined button. |
| | $focus-hover-background | Background color for outlined button on focus + hover. |
| | $active-background | Background color for active outlined button. |
| | $hover-foreground | Foreground color for hovered outlined button. |
| | $icon-color-hover | Icon color for hovered outlined button. |
| | $focus-foreground | Foreground color for focused outlined button. |
| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. |
| | $active-foreground | Foreground color for active outlined button. |
| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. |
| | $focus-visible-border-color | Border color for outlined button when focus is visible. |
| | $border-color | Border color for outlined button. |
| | $hover-border-color | Border color for hovered outlined button. |
| | $focus-border-color | Border color for focused outlined button. |
| | $active-border-color | Border color for active outlined button. |

#### FAB Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $active-background | Active background color |
| | $active-foreground | Active foreground color |
| | $focus-background | Focus background color |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |

</div>

<div class="theme-table bootstrap">

### Bootstrap Theme

#### Flat Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |
| | $disabled-foreground | Foreground color for disabled button |
| | $disabled-icon-color | Icon color for disabled button |
| | $shadow-color | Shadow color |

#### Contained Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $focus-background | Focus background color |
| | $active-background | Active background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $active-foreground | Active foreground color |
| | $shadow-color | Shadow color |
| | $disabled-background | Disabled background color |
| | $disabled-foreground | Disabled foreground color |
| | $disabled-icon-color | Disabled icon color |

#### Outlined Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |
| | $disabled-foreground | Foreground color for disabled button |
| | $disabled-icon-color | Icon color for disabled button |
| | $disabled-border-color | Border color for disabled button |
| | $hover-border-color | Hover border color |
| | $focus-border-color | Focus border color |
| | $active-border-color | Active border color |
| | $shadow-color | Shadow color |

#### FAB Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $focus-background | Focus background color |
| | $active-background | Active background color |
| | $disabled-background | Disabled background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $active-foreground | Active foreground color |
| | $shadow-color | Shadow color |
| | $disabled-foreground | Disabled foreground color |
| | $disabled-icon-color | Disabled icon color |

</div>
ボタンにスタイルを設定する別の方法は、**Sass** とタイプ別テーマ関数を使用することです。、、、および 。

それぞれは、特定のタイプのボタンのみをターゲットにします。
<div class="theme-table indigo">

### Indigo Theme

#### Flat Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $disabled-foreground | Disabled foreground color |
| | $disabled-icon-color | Disabled icon color |
| | $shadow-color | Shadow color |

#### Contained Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $focus-background | Focus background color |
| | $active-background | Active background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $active-foreground | Active foreground color |
| | $shadow-color | Shadow color |
| | $disabled-background | Disabled background color |
| | $disabled-foreground | Disabled foreground color |
| | $disabled-icon-color | Disabled icon color |

#### Outlined Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$foreground** | $hover-background | Background color for hovered button |
| | $focus-background | Background color for focused button |
| | $focus-hover-background | Background color for button on focus + hover |
| | $active-background | Background color for active button |
| | $hover-foreground | Foreground color for hovered button |
| | $icon-color-hover | Icon color for hovered button |
| | $focus-foreground | Foreground color for focused button |
| | $focus-hover-foreground | Foreground color for button on focus + hover |
| | $active-foreground | Foreground color for active button |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $focus-visible-border-color | Border color when focus is visible |
| | $border-color | Border color |
| | $hover-border-color | Hover border color |
| | $focus-border-color | Focus border color |
| | $active-border-color | Active border color |
| | $shadow-color | Shadow color |

#### FAB Button

| Primary Property | Dependent Property | Description |
|:--|:--|:--|
| **$background** | $foreground | Foreground based on background |
| | $icon-color | Icon color based on background |
| | $hover-background | Hover background color |
| | $focus-background | Focus background color |
| | $active-background | Active background color |
| | $disabled-background | Disabled background color |
| | $hover-foreground | Foreground on hover |
| | $icon-color-hover | Icon color on hover |
| | $focus-foreground | Foreground on focus |
| | $focus-hover-background | Focus + hover background |
| | $focus-hover-foreground | Foreground on focus + hover |
| | $focus-visible-background | Background when focus is visible |
| | $focus-visible-foreground | Foreground when focus is visible |
| | $active-foreground | Active foreground color |
| | $shadow-color | Shadow color |
| | $disabled-foreground | Disabled foreground color |
| | $disabled-icon-color | Disabled icon color |

</div>

</div>

</div>

> **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。

ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: 、、、および 。

各関数は、特定のタイプのボタンのみをターゲットにします。

まず、すべてのテーマ関数とコンポーネント ミックスインを含む themes モジュールをインポートします。

```scss
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

次に、スタイル設定するボタンのタイプ固有のテーマ機能を拡張する新しいテーマを作成します。この例では、関数を使用し、`$foreground` および `$background` パラメーターに、それぞれの hover および active パラメーターとともに値を渡します。

次のマークアップを前提として:

```html
<div class="my-contained-btn">
  <button igxButton="contained">Contained button</button>
</div>
```

次のテーマを作成する必要があります:

```scss
$custom-contained-theme: contained-button-theme(
    $background: #f9f0ff,
    $foreground: #722ed1,
    $hover-background: #efdbff,
    $hover-foreground: #9254de,
    $active-foreground: #531dab,
    $active-background: #dfc2fa,
);
```

contained タイプのボタンのスタイル設定に使用できるパラメーターの完全なリストについては、セクションを参照してください。

最後に、カスタム テーマをアプリケーションに**含めます**。

```scss
.my-contained-btn {
  @include tokens($custom-contained-theme);
}
```

タイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。

関数と 関数の場合、`$background` パラメーターに色の値を指定するだけで済みます。他のすべてのボタンの状態とテキストの色 (指定されていない場合) は、その値に基づいて自動的に生成され、適用されます。

テキストの色は、新しく追加された 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。

および では、状態用の色も自動的に生成されますが、これらは `$background` ではなく `$foreground` パラメーターに基づいて計算されます。

以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、[`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。

<DocsAside type="info" title="情報">
サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
</DocsAside>

### Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

```scss
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
```

ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。

- `light-*` クラスはライト テーマ用です。
- `dark-*` クラスはダーク テーマ用です。
- プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます: `light-contained-button`、`light-flat-button`、`dark-outlined-button`、`dark-fab-button`。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは で確認できます。これはさまざまなバリエーションで異なって反映されます。`flat` ボタンと `outlined` ボタンの主なプロパティは `$foreground` で、`contained` ボタンと `fab` ボタンの主なプロパティは `$background` です。構文は次のとおりです:

```html
<div class="buttons-sample">
  <div class="button-sample">
    <button
    igxButton="flat"
    class="!light-flat-button ![--foreground:#7B9E89]">
      Flat Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="contained"
    class="!light-contained-button ![--background:#7B9E89]">
      Contained Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="outlined"
    class="!light-outlined-button ![--foreground:#7B9E89]">
      Outlined Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="fab"
    class="!light-fab-button ![--background:#7B9E89]">
      Fab Button
    </button>
  </div>
</div>
```

<DocsAside type="info" title="情報">
ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
</DocsAside>

最終的に、button は次のようになります:

### カスタム サイズ変更

ボタンの高さは、`--size` 変数を使用して、`button` を直接ターゲットにして変更できます。

```scss
button {
  --size: 50px;
}
```

または、ユニバーサル変数 `--ig-button-size` を使用して、すべてのインスタンスをターゲットにすることもできます。

```html
<div class="my-app">
  <button igxButton="contained"></button>
</div>
```

```scss
.my-app {
  --ig-button-size: 50px;
}
```

事前定義されたサイズの 1 つを使用して、それを `--ig-size` 変数に割り当てることもできます。`--ig-size` に使用可能な値は、`--ig-size-small`、`--ig-size-medium`、`--ig-size-large` です。

```scss
button {
  --ig-size: var(--ig-size-large);
}
```

詳細については、[サイズ](display-density.md)の記事をご覧ください。

<hr/>

## API リファレンス

<hr/>

- - - - - ## その他のリソース

<hr/>

コミュニティに参加して新しいアイデアをご提案ください。

- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)