2021-12-19 09:50:55 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Buttons"
description="The essential button in pure HTML, without .classes for the default style."
canonical="buttons.html"
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="buttons-link"}
< div role = "document" >
< section id = "buttons" >
< hgroup >
< h1 > Buttons< / h1 >
< h2 > The essential button in pure HTML, without < code > .classes< / code > for the default style.< / h2 >
< / hgroup >
< article aria-label = "Button example" >
< button aria-label = "Button" > Button< / button >
< input type = "submit" >
< footer class = "code" >
< pre > < code > < < b > button< / b > > Button< /< b > button< / b > >
< < b > input< / b > < i > type< / i > =< u > "submit"< / u > > < / code > < / pre >
< / footer >
< / article >
2022-01-16 11:44:41 +07:00
< p > Buttons are < code > < i > width< / i > : < u > 100%< / u > ;< / code > by default. Use < code > < i > role< / i > =< u > "button"< / code > on an inline element if you need an inline button.< / p >
2021-12-19 09:50:55 +07:00
< article aria-label = "Inline buttons examples" >
< a href = "#" onclick = "event.preventDefault()" role = "button" > Link< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" > Link< / a >
< footer class = "code" >
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > > Link< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > > Link< /< b > a< / b > > < / code > < / pre >
< / footer >
< / article >
< p > Buttons come with < code > .secondary< / code > and < code > .contrast< / code > styles.< / p >
2022-03-13 15:31:11 +07:00
< p > ℹ ️ These classes are not available in the < a href = "classless.html" > class-less version< / a > .< / p >
2021-12-19 09:50:55 +07:00
< article aria-label = "Buttons styles examples" >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "secondary" > Secondary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "contrast" > Contrast< / a >
< footer class = "code" >
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary"< / u > > Secondary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast"< / u > > Contrast< /< b > a< / b > > < / code > < / pre >
< / footer >
< / article >
< p > And a classic < code > .outline< / code > variant.< / p >
< article aria-label = "Outline style examples" >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "outline" > Primary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "secondary outline" > Secondary< / a >
< a href = "#" onclick = "event.preventDefault()" role = "button" class = "contrast outline" > Contrast< / a >
< footer class = "code" >
< pre > < code > < < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "outline"< / u > > Primary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary outline"< / u > > Secondary< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast outline"< / u > > Contrast< /< b > a< / b > > < / code > < / pre >
< / footer >
< / article >
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
