Nav Buttons | Life Time | Core Design Guidelines

When used as a string of related links the buttons can be places within a generic container.

Examples

When used as a navigation bar the buttons should be placed within a list. Same appearance as default.

Stack buttons at the XS–SM breakpoints while visually keeping them grouped. Same appearance as default at the MD and up breakpoints.

The reversed style provides the buttons with contrast against dark backgrounds.

Button sizes can increase or decrease the size of the buttons in the group.

Use button groups for toolbars or grouping related links instead of placing separate buttons together on a row

Although it‘s entirely possible to use additional button styles, the default button style is the preferred presentation for this pattern (see the Reversed option for an example of how other styles can be applied)

In some cases there can be multiple CTAs and rather than going button crazy this pattern allows for multiple items to be grouped together in a cohesive visual representation
In other cases it is appropriate to create a toolbar of sorts where different controls or options should be grouped

Button labels should be written in a way that makes it clear what action the user is taking. If additional clarity is needed consider using text within a .sr-only <span> or with aria-label.
Buttons must have a visible focus state
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers
When using the active class on a button to represent that the current page or selection is active consider using aria-current="true" or aria-current="page"

nav Required	Place on a generic containter (like a `<div>`) for the default markup or a `<ul>` when the buttons are in a list
nav-btns Required	Use on the same element as `.nav`
nav-stack-sm Modifier	Use on the same element as `.nav` when you want the buttons to stack and the XS and SM breakpoints
nav-item Required	When using `<ul>` as the parent this is applied to the <`li>`
btn Required	Use on the `<button>` or <`a>`
active Modifier	Use with `.btn` when the button state should reflect a selection
btn-reversed Modifier	Use with `.btn` when the button is on a dark background
btn-lg Modifier	Add to the `btn` element to increase the size of the button shape and label
btn-sm Modifier	Add to the `btn` element to decrease the size of the button shape and label
btn-xs Modifier	Add to the `btn` element to decrease the size of the button shape and label (Label is the same size as `.btn-sm`)