mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(button): support large size button

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -350,7 +350,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |

2
docs/src/COMPONENT_API.json
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,

14
docs/src/pages/components/Button.svx
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>

3
src/Button/Button.svelte
View file

@ -13,7 +13,7 @@
/**
* Specify the size of button
* @type {"default" | "field" | "small" | "xl"}
* @type {"default" | "field" | "small" | "lg" | "xl"}
*/
export let size = "default";
@ -110,6 +110,7 @@
(size === "md" && !expressive && "bx--btn--md"),
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm",
size === "lg" && "bx--btn--lg",
size === "xl" && "bx--btn--xl",
kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled",

2
types/Button/Button.d.ts vendored
View file

@ -24,7 +24,7 @@ export interface ButtonProps
* Specify the size of button
* @default "default"
*/
size?: "default" | "field" | "small" | "xl";
size?: "default" | "field" | "small" | "lg" | "xl";
/**
* Set to `true` to use Carbon's expressive typesetting