To render an Icon within a Button, you can use any of the Cosmos Icons and add them as a child of the Button.

To render the Icon correctly, you should assign it the correct "icon" slot.

Use the icon-placement property to place the icon before or after the label.

When using Icon Buttons, it is recommended to change the button shape accordingly.

By default, the Button anticipates a light mode environment by appearing dark. In a dark mode environment, the Button should appear light instead.

The appearance of a Button can be set using the appearance property or by nesting it in a cosmos-mode component. Read more about the Mode & Appearance concept.

In some cases, the Button might be rendered inside another interactive element, such as an <a>.

In our example, the entire card is a link. Inside we have a Button that should also be displayed in the hover state when the element is hovered.

Setting the decorative support on the Button makes it a non-interactive and non-semantic <div>.

By default, a Button will adapt its width to its content. It is possible to change this behavior and make the width adapt to the parent container's size by setting the width property to the full value.

The width property is a Responsive Properties and can be configured per breakpoint.