{"meta":"<p>Button used to trigger an action.</p>\n<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Buttons are used for emphasizing important functions on your page.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Button\">Button <a class=\"header-anchor scroll-count-item\" href=\"#Button\" data-scroll-id=\"Button\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>Typeo of button</td>\n<td>&apos;primary&apos; | &apos;secondary&apos; | &apos;normal&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size of button</td>\n<td>ButtonSize</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>icons</td>\n<td>Available icons in button</td>\n<td>{ loading?: React.ReactNode }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>iconSize</td>\n<td>Size of icon in button</td>\n<td>| number<br> | &apos;xxs&apos;<br> | &apos;xs&apos;<br> | &apos;small&apos;<br> | &apos;medium&apos;<br> | &apos;large&apos;<br> | &apos;xl&apos;<br> | &apos;xxl&apos;<br> | &apos;xxxl&apos;<br> | &apos;inherit&apos;</td>\n<td>&#x9ED8;&#x8BA4;&#x6839;&#x636E; size &#x81EA;&#x52A8;&#x6620;&#x5C04;&#xFF0C;&#x6620;&#x5C04;&#x89C4;&#x5219;&#xFF1A;<br>size:large -&gt; <code>small</code><br>size:medium -&gt; <code>xs</code><br>size:small -&gt; <code>xs</code></td>\n<td></td>\n</tr>\n<tr>\n<td>htmlType</td>\n<td>Original html type for button element</td>\n<td>&apos;submit&apos; | &apos;reset&apos; | &apos;button&apos;</td>\n<td>&apos;button&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>The jsx tag to be rendered</td>\n<td>&apos;button&apos; | &apos;a&apos; | React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Loading state of a button</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>ghost</td>\n<td>Setting ghost button</td>\n<td>true | false | &apos;light&apos; | &apos;dark&apos;</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>text</td>\n<td>Is text button</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>warning</td>\n<td>Is warning button</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Is disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback of click event</td>\n<td>React.MouseEventHandler</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Button Group\">Button.Group <a class=\"header-anchor scroll-count-item\" href=\"#Button Group\" data-scroll-id=\"Button Group\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>-</td>\n<td>ButtonSize</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Button Size\">ButtonSize <a class=\"header-anchor scroll-count-item\" href=\"#Button Size\" data-scroll-id=\"Button Size\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">ButtonSize</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;small&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;medium&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;large&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">Trigger the onClick event</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">SPACE</td>\n<td style=\"text-align:left\">Trigger the onClick event</td>\n</tr>\n</tbody>\n</table>\n"}