Button

PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the variant property.

To indicate that an action is currently unavailable, all button variations can be disabled using the isDisabled property.

To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the "sm" value for the size property.

CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the "lg" value for the size property.

Block level buttons span the full width of the parent element and can be enabled using the isBlock property.

Progress indicators can be added to buttons to identify that an action is in progress after a click.

Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use component="a" and an href property to designate the button's target link.

Inline links should use component="span" and the isInline property to wrap inline with surrounding text.

In addition to being able to pass a string to the component property, you can provide more fine-tuned customization by passing a callback that returns a component.

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.

Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the isAriaDisabled property.

Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.

Buttons can display a count in the form of a badge to indicate some value or number by passing in the countOptions prop as a BadgeCountObject object. The BadgeCountObject object will handle count, isRead, and className props for the badge count.

To display a plain/icon button inline with text, use noPadding prop in addition to variant="plain".

Stateful buttons are ideal for displaying the state of notifications. Use variant="stateful" alongside with the state property, which can have these 3 values: read, unread (used as default) and attention (which means unread and requires attention).

You can pass both the isFavorite and variant="plain" properties into the <Button> to create a favorite button. Passing the isFavorited property will determine the current favorited state and update styling accordingly.

For a "settings" button with animations on hover and focus, you can pass the isSettings property into either a variant="plain" or variant="control" button.

For a "hamburger" button (fa-bars) that will animate based on the hamburgerVariant property, you can pass the isHamburger property. This will render the default icon for a hamburger button, and updating the hamburgerVariant property with a value of either "expand" or "collapse" will change the icon accordingly with an animation on hover and focus.

When used within a PatternFly <Masthead>, the animations and icon updates will occur automatically. See one of our full screen page demos to see this in action.