mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
chore: v11 Button
This commit is contained in:
Gregor Wassmann
Enrico Sacchetti
parent
d649fd3884
commit
96805c2aa1
7 changed files with 67 additions and 68 deletions
|
|
@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <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 | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "2xl"</code> | <code>"lg"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <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 | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -453,7 +453,7 @@
|
|||
"name": "kind",
|
||||
"kind": "let",
|
||||
"description": "Specify the kind of button",
|
||||
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
|
||||
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
|
||||
"value": "\"primary\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -465,8 +465,8 @@
|
|||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of button",
|
||||
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
|
||||
"value": "\"default\"",
|
||||
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
|
||||
"value": "\"lg\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
## Danger tertiary button
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
## Danger tertiary, icon-only button
|
||||
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
|
||||
## Danger ghost button
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
## Button with icon
|
||||
|
||||
|
|
@ -90,36 +90,36 @@ If an `href` value is specified, the component will render an [anchor element](h
|
|||
|
||||
## Field size
|
||||
|
||||
<Button size="field">Primary</Button>
|
||||
<Button size="field" kind="secondary">Secondary</Button>
|
||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||
<Button size="field" kind="ghost">Ghost</Button>
|
||||
<Button size="field" kind="danger">Danger</Button>
|
||||
<Button size="md">Primary</Button>
|
||||
<Button size="md" kind="secondary">Secondary</Button>
|
||||
<Button size="md" kind="tertiary">Tertiary</Button>
|
||||
<Button size="md" kind="ghost">Ghost</Button>
|
||||
<Button size="md" kind="danger">Danger</Button>
|
||||
|
||||
## Small size
|
||||
|
||||
<Button size="small">Primary</Button>
|
||||
<Button size="small" kind="secondary">Secondary</Button>
|
||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||
<Button size="small" kind="ghost">Ghost</Button>
|
||||
<Button size="small" kind="danger">Danger</Button>
|
||||
<Button size="sm">Primary</Button>
|
||||
<Button size="sm" kind="secondary">Secondary</Button>
|
||||
<Button size="sm" kind="tertiary">Tertiary</Button>
|
||||
<Button size="sm" kind="ghost">Ghost</Button>
|
||||
<Button size="sm" kind="danger">Danger</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>
|
||||
<Button size="xl" kind="tertiary">Tertiary</Button>
|
||||
<Button size="xl" kind="ghost">Ghost</Button>
|
||||
<Button size="xl" kind="danger">Danger</Button>
|
||||
|
||||
## Extra-large size
|
||||
|
||||
<Button size="2xl">Primary</Button>
|
||||
<Button size="2xl" kind="secondary">Secondary</Button>
|
||||
<Button size="2xl" kind="tertiary">Tertiary</Button>
|
||||
<Button size="2xl" kind="ghost">Ghost</Button>
|
||||
<Button size="2xl" kind="danger">Danger</Button>
|
||||
|
||||
## Disabled state
|
||||
|
||||
<Button disabled>Disabled button</Button>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
|
||||
/**
|
||||
* Specify the kind of button
|
||||
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
|
||||
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
|
||||
*/
|
||||
export let kind = "primary";
|
||||
|
||||
/**
|
||||
* Specify the size of button
|
||||
* @type {"default" | "field" | "small" | "lg" | "xl"}
|
||||
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
|
||||
*/
|
||||
export let size = "default";
|
||||
export let size = "lg";
|
||||
|
||||
/** Set to `true` to use Carbon's expressive typesetting */
|
||||
export let expressive = false;
|
||||
|
|
@ -101,12 +101,11 @@
|
|||
(size === "sm" && !expressive) ||
|
||||
(size === "small" && !expressive)) &&
|
||||
"bx--btn--sm",
|
||||
(size === "field" && !expressive) ||
|
||||
(size === "md" && !expressive && "bx--btn--md"),
|
||||
size === "field" && "bx--btn--field",
|
||||
((size === "field" && !expressive) || (size === "md" && !expressive)) &&
|
||||
"bx--btn--md",
|
||||
size === "small" && "bx--btn--sm",
|
||||
size === "lg" && "bx--btn--lg",
|
||||
size === "xl" && "bx--btn--xl",
|
||||
size === "2xl" && "bx--btn--2xl",
|
||||
kind && `bx--btn--${kind}`,
|
||||
disabled && "bx--btn--disabled",
|
||||
hasIconOnly && "bx--btn--icon-only",
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
<Button kind="danger">Danger button</Button>
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
<Button icon="{Add}">With icon</Button>
|
||||
|
||||
|
|
@ -32,30 +32,30 @@
|
|||
<p {...props}>Custom element</p>
|
||||
</Button>
|
||||
|
||||
<Button size="field">Primary</Button>
|
||||
<Button size="md">Primary</Button>
|
||||
|
||||
<Button size="field" kind="secondary">Secondary</Button>
|
||||
<Button size="md" kind="secondary">Secondary</Button>
|
||||
|
||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||
<Button size="md" kind="tertiary">Tertiary</Button>
|
||||
|
||||
<Button size="field" kind="ghost">Ghost</Button>
|
||||
<Button size="md" kind="ghost">Ghost</Button>
|
||||
|
||||
<Button size="field" kind="danger">Danger</Button>
|
||||
<Button size="md" kind="danger">Danger</Button>
|
||||
|
||||
<Button size="small">Primary</Button>
|
||||
<Button size="sm">Primary</Button>
|
||||
|
||||
<Button size="small" kind="secondary">Secondary</Button>
|
||||
<Button size="sm" kind="secondary">Secondary</Button>
|
||||
|
||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||
<Button size="sm" kind="tertiary">Tertiary</Button>
|
||||
|
||||
<Button size="small" kind="ghost">Ghost</Button>
|
||||
<Button size="sm" kind="ghost">Ghost</Button>
|
||||
|
||||
<Button size="small" kind="danger">Danger</Button>
|
||||
<Button size="sm" kind="danger">Danger</Button>
|
||||
|
||||
<Button disabled>Disabled button</Button>
|
||||
|
||||
<Button skeleton />
|
||||
|
||||
<Button skeleton size="field" />
|
||||
<Button skeleton size="md" />
|
||||
|
||||
<Button skeleton size="small" />
|
||||
<Button skeleton size="sm" />
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
<div class="bx--tooltip__footer">
|
||||
<Link href="/">Learn more</Link>
|
||||
<Button size="small">Manage</Button>
|
||||
<Button size="sm">Manage</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Link href="/">Learn more</Link>
|
||||
|
||||
<Button size="small">Manage</Button>
|
||||
<Button size="sm">Manage</Button>
|
||||
|
||||
<Tooltip triggerText="Resource list" icon="{Catalog}">
|
||||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
|
|
|
|||
8
types/Button/Button.svelte.d.ts
vendored
8
types/Button/Button.svelte.d.ts
vendored
|
|
@ -18,14 +18,14 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
|
|||
| "tertiary"
|
||||
| "ghost"
|
||||
| "danger"
|
||||
| "danger-tertiary"
|
||||
| "danger-ghost";
|
||||
| "danger--tertiary"
|
||||
| "danger--ghost";
|
||||
|
||||
/**
|
||||
* Specify the size of button
|
||||
* @default "default"
|
||||
* @default "lg"
|
||||
*/
|
||||
size?: "default" | "field" | "small" | "lg" | "xl";
|
||||
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
|
||||
/**
|
||||
* Set to `true` to use Carbon's expressive typesetting
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue