Examples
Examples
☝️ Watch out
To support custom fonts used by the Button component, ensure to provide the corresponding font-face declarations in your application.
Basic Usage
Button with Icon
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.
Extended Usage
Change the appearance
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.
Decorative Button
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>.
Width
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.