Button Link Component

Buttons are a great way to make a link stand out in a section or on a page. Use the different styles of buttons to convey primary and secondary actions or match alert styles. Buttons also come in different sizes to suit any space or fill the content area. With this component Font Awesome Icons can also be added before or after the text of the button.

Component Fields

Button Text

The text that appears inside the button. Keep this text brief and clear, use calls to action. Describe the page you are linking to and inspire the user to click with action words. Usually two words, sometimes three. (maximum of 32 characters)

Do not use "Click Here"! Using the wrong button and link text can make your website less accessible. Calls to action such as "Apply Now", "Register for TOP", or "Contact ITS" are good examples of button text.

Link

The page or URL to be linked to. Use the file icon to select a WKU web page or file using the dependency manager, or enter a full url starting with http:// or https://.

Style

The color or style of the button. Use the WKU Red button to convey primary actions that you want a user to take. The Gray Outline and Red Outline styles are great for secondary actions you need to include. For example, an "Apply Now" button would be the red primary action you want to be clicked, while "Learn More" would be the secondary to that.

Alert styles are also available for use in the alert snippets.

• WKU Red (Primary)
• Gray Outline (Secondary)
• WKU Red Outline
• Success (Green Alert)
• Info (Blue Alert)
• Warning (Yellow Alert)
• Danger (Red Alert)

Size

The size of the button. By default buttons are medium sized, use large buttons in main content areas and small buttons in side columns and cards with limited space.

• Small
• Medium (Default)
• Large

Title (Optional)

Titles are used for accessibility to expand on the text of the link. For example if you use the text "Contact Us", you may want to give more context as to who will be contacted. Use a title such as "Contact the ITS Service Desk for Help".

Open in New Tab

Opens links in a new browser tab. Helpful when linking to content such as videos that automatically plays or when you don't want a user to lose information entered into a form.

• Yes
• No (Default)

Icon (Optional)

Include an icon in the text of the button. Use the Icons - Font Awesome Gadget to search available icons and copy the icon name and icon style prefix. Use the Copy Icon Name button to add the icon values to your clipboard and paste them into this field. Must include the style prefix (fab, fas, far, or fal) and icon name starting with fa-. Ex. "fab fa-facebook" or "far fa-flag"

Icon Location (Optional)

If an Icon name is included in the previous field, this will determine where it displays in the button. Display your icon before the text (left), or after the text (right).

• Left (Default)
• Right

Full Width (Optional)

Makes the button fill the width of the content area. This is great for small spaces like cards or side columns. Avoid using this style in very wide areas like the main content area.

• Yes
• No(Default)

Examples

Example 1

Examples of the different style buttons available.

Button Text: Name of Button Style, see options above
Link: /oucampus
Style: Example of each, see options above
Size: Medium (Default)
Title: N/A
Open in New Tab: No
Icon: N/A
Icon Location: N/A
Full Width: No

Example 2

Primary buttons demonstrating the different sizes available.

Small    Medium Button (Default)    Large Button

Button Text: Name of Size, see options above
Link: /oucampus
Style: WKU Red (Primary)
Size: Example of each, see options above
Title: N/A
Open in New Tab: No
Icon: N/A
Icon Location: N/A
Full Width :No

Example 3

These buttons demonstrate the Font Awesome icon options.

Button Text: Course Catalog
Link: http://catalog.wku.edu/
Style: WKU Red (Primary)
Size: Medium (Default)
Title: N/A
Open in New Tab: Yes
Icon: far fa-graduation-cap
Icon Location: Left
Full Width: No

Button Text: About Buttons
Link: https://en.wikipedia.org/wiki/Button
Style: WKU Red (Primary)
Size: Medium (Default)
Title: Learn more about buttons on Wikipedia
Open in New Tab: No
Icon: fas fa-external-link
Icon Location: Right
Full Width: No

Example 3

The following buttons demonstrate the Full Width setting inside a card with the small size.

Button Text: Card Snippets
Link: /oucampus/snippets/cards.pcf
Style: WKU Red (Primary)
Size: Small
Title: About Card Snippets
Open in New Tab: No
Icon: N/A
Icon Location: N/A
Full Width: Yes