button()
button({
text: '"Happy Octopus" by Zach Bogart from Noun Project',
link: "https://thenounproject.com/browse/collection-icon/adorable-octopus-60758/?p=1",
bi: "emoji-smile-fill",
color: "white",
fill: "purple",
colorHover: "#333",
fillHover: "coral"
})
function button({
text= "Nouns by Zach Bogart", // icon text
link= "https://thenounproject.com/zachbogart", // link on-click, opens in new tab
bi= "arrow-up-right-square-fill", // bootstrap icon slug, omit "bi", see https://icons.getbootstrap.com/
color= "white", // text color
colorHover= "white", // text color on hover
fill= "#333", // background fill
fillHover= "#555" // background color on hover
}={}) {
return html`
<form action="${link}" target="_blank">
<button
style="background-color: ${fill};
border: none;
color: ${color};
padding: 12px 18px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
border-radius: 4px;"
onMouseOver="this.style.color='${colorHover}';this.style.backgroundColor='${fillHover}';"
onMouseOut="this.style.color='${color}';this.style.backgroundColor='${fill}';">
<i class="bi bi-${bi}"></i> ${text}
</button>
</form>
<!-- Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
