feat(ActionButton): use button component for action button

[ethanashaw]

Done

I changed ActionButton to use the Button component instead of the default HTML button, allowing for the extra props.

I made a change to one of the ConfirmationModal stories showing this off. We needed to include an icon for a confirmation button, but the button couldn't be styled with the hasIcon prop before.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Steps for QA.

Percy steps

• No visual changes expected.

[Copilot]

Pull request overview

Updates ActionButton to render the shared Button component so it can accept additional Button props (e.g. hasIcon), and demonstrates this in Storybook via ConfirmationModal.

Changes:

• Switch ActionButton from a native <button> to the shared <Button> component and widen its spread props to ButtonProps.
• Attempt to add ref support to Button via a ref prop.
• Update ConfirmationModal Storybook story to show an icon + label confirm button using hasIcon.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/components/ActionButton/ActionButton.tsx	Renders Button instead of native button and expands accepted props to ButtonProps.
src/components/Button/Button.tsx	Adds a ref field to the exported prop type in an attempt to support refs.
src/components/ConfirmationModal/ConfirmationModal.stories.tsx	Demonstrates icon+label confirm button using confirmButtonProps.hasIcon.

Comments suppressed due to low confidence (1)

src/components/ActionButton/ActionButton.tsx:180

• ActionButton relies on ref.current to measure the button size, but passing ref={ref} to <Button /> will not attach the ref unless Button forwards refs. As-is, ref.current will stay null and the loader sizing logic won’t run. Either switch Button to forwardRef (preferred) or revert this component to rendering a native <button> and manually apply the needed Button classes/props.

    <Button
      className={buttonClasses}
      ref={ref}
      onClick={isDisabled ? onClickDisabled : onClick}
      aria-disabled={isDisabled || undefined}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.