If you are reusing a collection of html attributes, here are two ways you could handle this:

1. Save the attributes into an object and spread the object onto each <button> that uses them.
2. Create a <CustomButton> component and encapsulate the shared attributes in the component. Because each attribute is exposed as a prop in the component interface, each prop/attribute has a default value but can be overwritten if necessary.

// #1
const defaultButtonProps = {
  className: "btn btn-secondary dropdown-toggle",
  style: { margin: "5px" },
  type: "button",
  "data-bs-toggle": "dropdown",
  "aria-expanded": "false"
};

export default function App() {
  return (
    <div className="App">
      <div>
        {/* #1 */}
        <button {...defaultButtonProps}>Delete</button>
        <button {...defaultButtonProps}>Save</button>
      </div>
      <div>
        {/* #2 */}
        <CustomButton />
        <CustomButton>Save</CustomButton>
      </div>
    </div>
  );
}

// #2
const CustomButton = ({
  className = "btn btn-secondary dropdown-toggle",
  style = { margin: "5px" },
  type = "button",
  dataBsToggle = "dropdown",
  ariaExpanded = "false",
  children = "Delete"
}) => {
  return (
    <button
      className={className}
      style={style}
      type={type}
      data-bs-toggle={dataBsToggle}
      aria-expanded={ariaExpanded}
    >
      {children}
    </button>
  );
};