Refactor button + Add new semantic mode and/or Create New Component

[irenevera]

We are facing an issue with our current buttons, which are too large to be used in compact components (like alerts and toasts). This affects the consistency and usability of our interfaces. We would like to open a discussion to explore two possible solutions:

Refactor the Button Component and Add a New Semantic Mode:

• Proposal: Adjust the size and style of the existing button component, adding a specific semantic mode (for alerts and toasts but not only limited to these)
• Pros: Maintains consistency in button usage and avoids the need to create new components.
• Cons: Could impact the Ui of our products.

Create a New Button Component:

• Proposal: Develop a new button component with a more compact design.
• Pros: Allows for an optimized design for wider use cases without affecting the main button component.
• Cons: Introduces a new component that will need to be maintained and updated separately.

This will also solve previous request #1746

[GomezIvann]

Technical approach

To incorporate this use case into the current DxcButton I propose two things:

• New prop semantic. Defines the semantic character of the component. Values: "error", "default", "valid", etc.
• Change the API of the size prop. Now it would become an object and allow to set both width (current values: "small", "medium") and height ("s" or "small", "m" or "medium", etc).

A coded example would be:

<DxcButton 
	label="Submit"
	size={
		height: "s"
		width: "medium",
	}
	semantic="error" // "valid", "default"
	mode="secondary"
/>

[GomezIvann]

This is already implemented and released in the next version of Halstack.