Button
The button is a core component that allows for display and different configurations of a button item on a page. The button allows a user to interact with the page.
On This Page:
Purpose
This component is used for directing a user to an action: engage with site content, subscribe to a mail list, or respond to a survey.
By incorporating a button on a page, a user can be redirected to another page or take other action. The configuration can be used to create different size, shape, orientation and color of a button based on the official Button Usage Guidelines.
Configure Dialog
The configure dialog allows the content author to define the properties, and attach a link to the button.
Label: Text displayed on the button.
URL: Allows a link to another page within AEM, an external pop up, or even an anchor.
Font Size: Changes the font size of text in the button.
- Available options:
- Default (14px)
- Large (18px)
- Extra Large (24px).
- When user selects font size Large (18px) or Extra Large (24px), 25% width option is disabled.
Width: Changes the width of the button.
- Available options:
- Auto
- 100%
- 90%
- 75%
- 60%
- 50%
- 25%.
- When user selects Width 25%, font size - Large (18px) and Extra Large (24px) are disabled.
Color: Changes the color of the button.
- Available options:
- Engage — PMS Blue (default)
- Engage Secondary — Steel 50
- Subscribe — Gold 700
- Respond — Forest 700
Alignment: Changes the placement of the button on the page.
- Available options:
- Left (Default)
- Center
- Right
Open in New Window: Ability to have the link in the button open in a new tab. All links outside of census.gov should open in a new tab.
Styles
Each of the button colors available serve a specific purpose. It is important to use the correct color to provide consistency for users across the site. The four colors are:
- "Engage — PMS Blue": This is the default selection with no specific job other than to allow the user to engage with various content and navigation on the site.
- "Engage Secondary — Steel 50": An alternative to the default Engage style, used for darker backgrounds or if there is more than one Engage button on the page.
- "Subscribe — Gold 700": Specifically for prompting the user to subscribe to a Census newsletter.
- "Respond — Forest 700": Specifically for prompting the user to take part in an official Census survey.
