Buttons are points of interaction for a website. A user is trained to activate a Button in order to perform an action. The Button component consists of a clickable container with descriptive text inside.
Primary Buttons should only have a single action for the user to take and in most cases there should only be one Primary Button on any given page.
<button class="sprk-c-Button"> Button </button>
When there is more then one action within a single view, Secondary Buttons can be a good option to allow the user to take another action other than the Primary. Use this when a secondary action is required that is relevant to the whole page (think of a print page or a share action).
<button class="sprk-c-Button sprk-c-Button--secondary" type="button"> Button </button>
Use a Tertiary Button when there is an action that the user is required to complete that is separate from the primary action.
<button class="sprk-c-Button sprk-c-Button--tertiary"> Button </button>
Remove Buttons indicate that something can be removed. Use a Remove Button when a user has the ability to remove something.
<button class="sprk-c-Button sprk-c-Button--removal" type="button"> Button </button>
Use a Disabled Button when an action is unavailable to the user. The Disabled styles can be applied to all Spark buttons. It's important to add the `disabled` attribute in addition to the `sprk-is-Disabled` class to indicate that the button should not receive focus.
<button class="sprk-c-Button sprk-is-Disabled" disabled> Button </button>
Use the Spinner component on any Button that is being used to save or submit data.
<button class="sprk-c-Button" data-sprk-spinner="click"> Submit </button>
Use for a full width button on small screens that returns to normal width at large screens.
<button class="sprk-c-Button sprk-c-Button--full@sm" type="button"> Button </button>