Button (Button) on Base Toolkit - Version 2.9

Preview this component (CSS classes; v2.3.0; 9/29/2021)

Guidelines using the component

View our College

Description

The Illinois theme class il-button provides standardized styles for button elements.

Accessibility

This should be used only to trigger an in-page action. If you are going to a new page, use an anchor link.

CSS options

Color values available:

il-white-blue – White button, blue border and text
il-white-orange – White button, orange border and text
il-blue – Blue button, white text
Il-orange – Orange button, white text

Component Display

Change Your Content and Options

Template -- enter raw HTML here

Template Options

Important Classes

N/A

Classes

Button Theme

Attributes

N/A

Advanced Options

These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.

Custom Style Tag before text

--il-button-background-color (Background color)
--il-button-foreground-color (Text color)
--il-button-border-color (Border color)
--il-focused-button-background-color (Background color when focused / hovered)
--il-focused-button-foreground-color (Color when focused / hovered)
--il-focused-button-border-color (Border color when focused / hovered)

How to add it to your page

Copy and paste this in your page. Remember

Make sure you have updated your component to make sure the below code is completed.
Make sure you have the Header code in your header.

Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.

Copied to clipboard