{"data":{"type":"contents","id":"components/button","attributes":{"html":"<h1 id=\"button\">Button</h1>\n<h2 id=\"usage\">Usage</h2>\n<p>Simplest use case: a button with text in it, telling the user what to do.</p>\n<pre><code class=\"html language-html\">&lt;button class=\"es-button\" aria-label=\"click me\" type=\"button\"&gt;\n    click me\n&lt;/button&gt;\n</code></pre>\n<h2 id=\"secondarybuttons\">Secondary Buttons</h2>\n<pre><code class=\"html language-html\">&lt;button class=\"es-button-secondary\" aria-label=\"click me\" type=\"button\"&gt;\n    click me\n&lt;/button&gt;\n</code></pre>\n<h2 id=\"stylinglinks\">Styling Links</h2>\n<p>It is also possible to style a link to look like a button using the <code>es-button</code> or <code>es-button-secondary</code> class.</p>\n<pre><code class=\"html language-html\">&lt;a href=\"https://emberjs.com\" class=\"es-button\"&gt;Go to Ember homepage&lt;/a&gt;\n&lt;a href=\"https://guides.emberjs.com\" class=\"es-button-secondary\"&gt;Go to the Guides&lt;/a&gt;\n</code></pre>","content":"# Button\n\n## Usage\n\nSimplest use case: a button with text in it, telling the user what to do.\n\n```html\n<button class=\"es-button\" aria-label=\"click me\" type=\"button\">\n    click me\n</button>\n```\n\n## Secondary Buttons\n\n```html\n<button class=\"es-button-secondary\" aria-label=\"click me\" type=\"button\">\n    click me\n</button>\n```\n\n## Styling Links\nIt is also possible to style a link to look like a button using the `es-button` or `es-button-secondary` class.\n\n```html\n<a href=\"https://emberjs.com\" class=\"es-button\">Go to Ember homepage</a>\n<a href=\"https://guides.emberjs.com\" class=\"es-button-secondary\">Go to the Guides</a>\n```"}}}