x-iconbutton

« Back to docs

<x-iconbutton>s provide a simple way to declare buttons with icons by abstracting away the HTML layout and CSS styling that goes into properly anchoring and centering the contents.

Basic usage

Put any markup here!

Initializing markup

<x-iconbutton src="firefox.png">
Put <code>any markup</code> here!
</x-iconbutton>
Top

Editing the icon with icon-anchor and src

Lorem ipsum

Initializing markup


        
Top

Editing the button with .contentEl and .iconEl

When editing the actual contents of the iconbutton, in order to help preserve the underlying shadow DOM, we provide access to the content-label and icon DOM elements through .contentEl and .iconEl, respectively.

Important: Edit these elements instead of directly editing .innerHTML or .textContent of an <x-iconbutton>.

Content

Initializing markup


            

JavaScript

// assume that randomColor and randomWord are already provided
var iconElToggle = document.getElementById("iconel-edit-button");
var contentElToggle = document.getElementById("contentel-edit-button");
var iconButton = document.getElementById("dom-demo-button");

// "edit .iconEl" button
iconElToggle.addEventListener("click", function(e){
iconButton.iconEl.style.backgroundColor = randomColor();
});

// "edit .contentEl" button
contentElToggle.addEventListener("click", function(e){
iconButton.contentEl.innerHTML = "<code>"+randomWord(7)+"</code>";
});
Top

Custom styling the button

How fancy!

Initializing markup

<x-iconbutton id="custom-style-iconbutton" src="firefox.png">
How fancy!
</x-iconbutton>

CSS styling

#custom-style-iconbutton{
border: 1px solid grey;
border-radius: 4px;
box-shadow: 1px 1px grey;
padding: 5px;

background-color: #93bce0;
background-image: none;
}

#custom-style-iconbutton:hover{
background-color: #bbd5eb;
background-image: none;
}

#custom-style-iconbutton[active]{
box-shadow: inset 1px 1px 4px grey;
background-color: #bbd5eb;
background-image: none;
}

#custom-style-iconbutton > .x-iconbutton-content{
font-family: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-size: 2em;
color: white;
text-shadow: -1px -1px #ddd;
}
Top