component	button
date	2026-06-08
pf_version	Release 6.5.1
pf_url	https://www.patternfly.org/components/button
pfj_url	http://localhost:1234/components/button
sections	pf_count pfj_count matched missing_in_pfj extra_in_pfj 17 18 16 Custom component Clicked buttons Types

#	PF Section	PFJ Section	Group	Status
1	Variant examples	Variant examples	Examples	matched
2	Disabled buttons	Disabled buttons	Examples	matched
3	Small buttons	Small buttons	Examples	matched
4	Call to action (CTA) buttons	Call to action (CTA) buttons	Examples	matched
5	Block level buttons	Block level buttons	Examples	matched
6	Progress indicators	Progress indicators	Examples	matched
7	Links as buttons	Links as buttons	Examples	matched
8	Inline link as span	Inline link as span	Examples	matched
9	Custom component	---	Examples	missing_in_pfj
10	Aria-disabled examples	Aria-disabled	Examples	matched (semantic)
11	Button with count	Button with count	Examples	matched
12	Plain with no padding	Plain with no padding	Examples	matched
13	Stateful	Stateful	Examples	matched
14	Circle buttons	Circle buttons	Examples	matched
15	Favorite	Favorite	Animated examples	matched
16	Settings	Settings	Animated examples	matched
17	Hamburger	Hamburger	Animated examples	matched

Status: differences_found

• PFJ icon spans in link buttons missing pf-m-start / pf-m-end position modifiers. PF uses pf-m-start on the icon span when icon is before text, and pf-m-end when icon is after text.
• PFJ stateful button icon spans missing pf-m-start modifier. PF stateful buttons have pf-m-start on the icon span.

• PFJ plain button missing aria-label="Action". PF has aria-label="Action" on the plain icon-only button.
• PFJ control icon button missing aria-label="Copy". PF has aria-label="Copy".

• PFJ stateful buttons use SVG viewBox 0 0 448 512 (FontAwesome), PF uses 0 0 32 32 (Red Hat icons).

Status: differences_found

• PFJ disabled buttons add pf-m-disabled modifier class. PF disabled buttons do NOT use pf-m-disabled — they rely on the native disabled attribute only.

• PFJ disabled buttons add aria-disabled="true" alongside disabled. PF only uses the disabled attribute (no aria-disabled).
• PFJ plain disabled button missing aria-label="Action". PF has it.
• PFJ control disabled icon button missing aria-label="Copy". PF has it.

Status: differences_found

• PFJ includes pf-m-danger,pf-m-secondary,pf-m-small variant (danger secondary small). PF small-buttons section does not include this variant — PFJ has extra showcase coverage here.

• PFJ shows additional small variants (link, inline link, plain, control, control icon) beyond what PF shows. This is extra PFJ coverage, not a gap.

Status: differences_found

• PFJ CTA link button arrow icon: viewBox 0 0 512 512 (FontAwesome). PF uses viewBox null (inline SVG without explicit viewBox).

• PFJ includes disabled CTA variants. PF does not show disabled CTAs in this section.

Status: ok

Status: differences_found

• PFJ plain upload button missing aria-label="Upload". PF has aria-label="Upload".

Status: differences_found

• PFJ shows additional link variants (danger secondary, danger link, jump link). PF shows primary, secondary, disabled tertiary, and link. The extra PFJ variants are additional coverage.
• PFJ text content differs slightly ("Link to docs" vs PF "Link to PatternFly home").

Status: differences_found

• PF has TWO inline span buttons (one explaining keyboard event handling). PFJ has only ONE.

• PFJ inline span button missing type="button" attribute. PF has type="button" on the span element.

Status: differences_found

• PF has tooltip examples: a primary button with tooltip and a secondary link-as-button with aria-disabled. PFJ does not include these tooltip variations.

• PFJ includes additional aria-disabled variants (secondary, danger, warning, plain, control) beyond PF's examples. PFJ has broader coverage.

• PFJ aria-disabled plain button missing aria-label. PF plain buttons have aria-labels.

Status: differences_found

• PFJ disabled buttons with count add pf-m-disabled modifier. PF uses only the disabled attribute without pf-m-disabled.
• PFJ disabled badges do NOT have pf-m-disabled modifier. PF badges inside disabled buttons DO have pf-m-disabled.

Status: differences_found

• PFJ button missing aria-label="More info". PF has aria-label="More info".

Status: differences_found

• PFJ stateful button icon spans missing pf-m-start modifier. PF stateful buttons have pf-m-start on icon spans.

• PFJ stateful icons: viewBox 0 0 448 512 (FontAwesome). PF: 0 0 32 32 (Red Hat icons).

Status: differences_found

• PFJ shows 4 basic circle buttons + 4 loading circles. PF shows 12 circle variants (primary, secondary, tertiary, danger, warning, link, control, plain, 3 stateful, upload). PFJ is missing: warning, link, control, plain, all 3 stateful, and upload circle variants.

• PFJ circle buttons missing aria-label attributes. PF circle buttons all have descriptive aria-labels.

Status: ok

Status: ok

Status: differences_found

• PFJ hamburger buttons missing pf-m-expand and pf-m-collapse modifiers. PF has three hamburger states: default, expand, and collapse.

• PFJ hamburger button missing aria-expanded attribute. PF hamburger buttons have aria-expanded="false" (default/expand) and aria-expanded="true" (collapse).

1. [P1] Add variation: Inline span second example — PF shows a second inline span button with keyboard event handling text. Add this to the PFJ showcase.
2. [P1] Add variation: Aria-disabled tooltip examples — PF shows aria-disabled buttons with tooltips (primary button + secondary link-as-button). Implement tooltip support for aria-disabled buttons.
3. [P1] Add variation: Circle button variants — PFJ missing 8 circle button variants (warning, link, control, plain, 3 stateful, upload). Add these to the showcase.
4. [P2] Fix modifier: Icon position modifiers — Add pf-m-start / pf-m-end to pf-v6-c-button__icon spans across all sections (variant examples, disabled, stateful, etc.).
5. [P2] Fix modifier: Disabled button modifier — PFJ adds pf-m-disabled to disabled buttons but PF does not. Remove pf-m-disabled from natively disabled buttons (keep only disabled attribute). Note: pf-m-disabled is correct for <a> elements where native disabled doesn't work.
6. [P2] Fix modifier: Badge disabled modifier — PFJ disabled button badges missing pf-m-disabled on the pf-v6-c-badge span. PF adds pf-m-disabled to badges inside disabled buttons.
7. [P2] Fix modifier: Hamburger expand/collapse — Add pf-m-expand and pf-m-collapse modifiers to hamburger button states.
8. [P3] Fix attribute: aria-label on icon-only buttons — Multiple sections (variant, disabled, progress, plain-no-padding, circle) have icon-only buttons missing aria-label. Add appropriate aria-labels.
9. [P3] Fix attribute: Disabled button aria-disabled — PFJ adds aria-disabled="true" to natively disabled buttons. PF only uses disabled. Remove redundant aria-disabled from buttons that already have disabled.
10. [P3] Fix attribute: Inline span type attribute — PFJ inline span button missing type="button". Add it.
11. [P3] Fix attribute: Hamburger aria-expanded — Add aria-expanded attribute to hamburger buttons.
12. [P4] Fix icon: Stateful button icons — PFJ uses FontAwesome icons (viewBox 0 0 448 512) for stateful buttons. PF uses Red Hat icons (viewBox 0 0 32 32). Align icon sets.
13. [P4] Fix icon: CTA link arrow icon — PFJ CTA link button uses FontAwesome arrow. PF uses a different icon. Align icon.
14. [P1] Add section: Custom component — PF has a "Custom component" section. Implement this in PFJ if the feature is supported.