Icon Button

The Icon Button is used to display supplementary actions in the interface, either to trigger actions or drive navigation is allowed. They cannot be used as the main call to action.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack gap="medium">
                                                            <w-icon-button icon-name="calendar"></w-icon-button>
                                                            <w-icon-button icon-color="accent" icon-name="plus-filled"></w-icon-button>
                                                            <w-icon-button icon-color="danger" icon-name="bin"></w-icon-button>
                                                          </w-stack>
                                                        </template>

Props

Name	Description	Type	Default	Values
aria-controls	Identifies the element (or elements) whose contents or presence are controlled by this component.	string
aria-label	Defines a string value that labels an element.	string
icon-name Required	Icon name in the kebab-case format	string		icon name (i.e. "alarm-clock")
icon-color	Sets the icon color	string	secondary	primary, secondary, muted, accent, success, warning, danger