feat(button): support large size button

Set size to "lg" to use the large size.
This commit is contained in:
Eric Y Liu 2021-06-26 06:32:32 -07:00
commit b2e2765910
5 changed files with 16 additions and 7 deletions

View file

@ -362,7 +362,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"xl\"",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,

View file

@ -78,7 +78,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<p {...props}>Custom element</p>
</Button>
### Field button
### Field size
<Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button>
@ -86,7 +86,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button>
### Small button
### Small size
<Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button>
@ -94,7 +94,15 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
### Extra-large button
### Large size
<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>
### Extra-large size
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>