Buttons

Buttons

Buttons are used throughout choco-theme with multiple sizes, states, and variants.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Button documentation.

Solid Buttons

Solid buttons are used to signify the main action a user should take.

Outline Buttons

Outline buttons are used to signify the secondary action a user should take. An outline button is never used by itself, and must be paired with a solid button of the same color, except for when used in conjunction with a "cancel" option. No btn-outline-bg-body-tertiary exist due to failing accessibility.

Social Media Buttons

Connect on Community Chat Connect on Community Chat Follow on Twitch Follow on Twitch Follow on Twitter Follow on Twitter Follow on LinkedIn Follow on LinkedIn Subscribe on YouTube Subscribe on YouTube

Button with Badge

The button with badge must be used with the class btn-outline-primary only. No other color options are available.

Size Responsive Button

The responsive button can be used with any btn-${color} or btn-outline-${color} class. This button will appear as the default size on larger screens and smaller on mobile devices.

Close Buttons

This close button is generally used inside modals and alerts. This deviates from the standard Bootstrap close button, and ops to use Font Awesome for the close icon instead of Bootstrap icons.

Best Practices

DON'T

Do not use an outline button for a main action.

DO

Use a solid button for a main action.

DON'T
  • Do not use two different colored buttons.
  • Do not position the outline button on the right.
  • Button text is not title cased.
DO
  • Use the same color for both buttons.
  • Position the solid button on the right, and the outline button on the left.
  • Button text is title cased.