Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Button

The Core Component Button component allows for the configuration and display of a button item on a page.

Editor to Copy/Paste
Training
Figma Design

Full-Width Buttons

These adjust to span the number of columns specified during resizing.

Large Buttons

Medium Buttons (Default)

Small Buttons

Auto-Width Buttons 

These automatically span as wide as the amount of text is in it.

'Max-Allowed Width' Buttons 

The maximum allowed width, idk?

Buttons with Icon

Using icons from our Icon Font Library system.

Training

The Core Component Button component allows for the inclusion of a button on a page.

  • The button’s properties can be selected in the configuration dialog.

  • Styles for the Button Component can be defined in the design dialog.

Training Video

8:57

Use Cases

Button Component: PDF Display Functionality Author Guide

This is a short training video that walks an author through all the steps to use the enhancement, which provides a new way to create calls to action (CTAs) for PDF content while improving overall page design flexibility and the user experience.

5:34

Authoring Capability

The configuration dialog enables the content author to define the button's behavior, appearance, and interaction with a visitor on the page.

  • Text - This field will contain the text that appears on the button.

  • Link - This field is where the button’s destination link or CMS path is placed.

  • Icon - We have few defined classes to get icon beside the button label.

  • Analytics ID - This field is where the data-form--element ID or click tracking code is placed.

  • Dynamic Data Attribute 

    - Value authored in this field will be added to button component as attribute : data-target=authoredValue. This adds a class to the button component used to trigger specific JavaScript on click of the button, etc.

    -  Value authored in this field will be added to button component as attribute : modal-id-uxdia-c-leaving-modal. This adds a class to the button component used to trigger specific JavaScript on click to open the Leaving AAPR modal.

  • Tool tip Content - Value authored in tool tip is shown below the button.

  • Label - A description of the destination of the button that is read to screen readers is placed here.

  • Type Dropdown - The author can choose from the following:

    • None

    • Primary Button - Red button with white text

    • Secondary Button - White button with red text

    • Tertiary Button - White button with black text

    • Quarternary Button - Black button with white text (not currently being used across AARP websites)

  • Size Dropdown - The author can choose from the following sizes:

    • None

    • Small - Small button size

    • Medium - Medium button size

    • Large - Large button size

  • Icon Dropdown - The author can choose from the following:

    • None

    • Icon Only

  • Width Dropdown - The author can choose from the following:

    • None

    • Auto width - the width automatically adjust to the size of the text

    • Full width - The button is the full width of the container and is what we already had with Blank Template

    • Max allowed width - the button is as wide as it can be in the template

  • AI Config - You can set this container for AI functionality or you can set it for curated container or none.