graycoreio/daffodil

<h1>Button</h1>
<p>The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.</p>

<h2>Overview</h2>
<p>Native <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> elements are always used in order to provide an easy, accessible experience for users.</p>
<ul>
  <li><code>&lt;a&gt;</code> should be used for interactions that will navigate users to a new page or to a different target on the same page.</li>
  <li><code>&lt;button&gt;</code> should be used when a clickable action is performed within the same page.</li>
</ul>

<h2>Types</h2>
<p><code>daff-button</code> — Rectangular contained button with background color</p>
<p><code>daff-flat-button</code> — Rectangular button with no background color</p>
<p><code>daff-icon-button</code> — Icon button used with icon fonts</p>
<p><code>daff-raised-button</code> — Rectangular contained button with background color and elevation</p>
<p><code>daff-stroked-button</code> — Rectangular outlined button with no background color</p>

<h3>Basic Button</h3>
<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>

<h3>Flat Button</h3>
<design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>

<h3>Stroked Button</h3>
<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>

<h3>Raised Button</h3>
<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>

<h3>Icon Button</h3>
<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>

<h3>Underline Button</h3>
<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>

<h3>Sizes</h3>
<p>The size of a button can be updated by using the <code>size</code> property. The size of all the button variants will default to <code>md</code> if no size is defined. This can be updated to the three sizes buttons support.</p>
<p>Supported Sizes: <code>sm | md | lg</code></p>

<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>

<h3>Theming</h3>
<p>The default color of a button is light gray, but it can be updated to one of the supported colors by using the <code>color</code> property.</p>
<p>Supported colors: <code>primary | secondary | tertiary | black | white | theme | theme-contrast</code></p>
<blockquote>For select button types, <code>black</code>, <code>white</code>, and <code>theme</code> should be used with caution to ensure that there is sufficient contrast.</blockquote>

<h3>Status Indicators</h3>
<p>Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.</p>

<p>Supported statuses: <code>warn | critical | success</code></p>

<design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>

<h3>Accessibility</h3>
<p>Daffodil uses native <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> HTML elements to ensure an accessible experience by default. The <code>&lt;button&gt;</code> element should be used when a clickable action is performed within the same page. The <code>&lt;a&gt;</code> element should be used to navigate users to a new page or to a different target on the same page.</p>

<p>Buttons and links containing only icons (<code>&lt;daff-icon-button&gt;</code>) need to be given meaningful labels using <code>aria-label</code> or <code>aria-labelledby</code>.</p>