Bug - Label - Clickable area is

[christianvogt]

Describe the problem

When a <Label> component has an onClick handler, the clickable area (the inner <button>) does not extend to the full visual bounds of the <Label> outline. The outer <span class="pf-v6-c-label"> renders padding/border that is visually part of the label, but clicking on that outer region does not trigger the onClick.

How do you reproduce the problem?

<Label onClick={() => console.log('clicked')}>Label 1</Label>

Rendered HTML:

<span class="pf-v6-c-label pf-m-filled pf-m-clickable">
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
    <span class="pf-v6-c-label__text">Label 1</span>
  </button>
</span>

The <button> (.pf-v6-c-label__content) is smaller than the outer <span> (.pf-v6-c-label), so clicks in the gap between the button edge and the label outline are not handled.

Expected behavior

The entire visible area of the label (up to and including the outline/border) should be clickable.

Is this issue blocking you?

No. Just annoyance.

Screenshots

DevTools showing the button's hit area (36.44 x 18) sits inside the label outline:

What is your environment?

• Mac OS

• Chrome

Any other information?

The root cause appears to be that the outer <span> carries padding/border that is not covered by the inner <button>. Either the button should be styled to fill the span completely, or the click handler should be placed on the outer element.

---

Jira Issue: PF-4031