## Button

Check out the Brandguide to find out when to use which version of the button.

### Primary Button

`<button bciPrimaryButton>Sign In</button>`
`<button bciPrimaryButton disabled>Sign In</button>`

### Secondary Button

`<button bciSecondaryButton>Sign In</button>`
`<button bciSecondaryButton disabled>Sign In</button>`

### Tertiary Button

`<button bciTertiaryButton>Remove</button>`
`<button bciTertiaryButton disabled>Remove</button>`

### Integrated Button

`<button bciIntegratedButton>Button label</button>` `<button bciIntegratedButton disabled>Button label</button>`

### Buttons with dynamic width

### Buttons with Icons and Label

Padding for the buttons with icons and labels will affect in Firefox as the styles were implemented with :has() selector. It will be fixed in the future once :has selector is compatible with Firefox. For more details about the browser compatibility, please check here.

### Buttons with Icons