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