diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b74b6190..0f5ee035 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -431,22 +431,22 @@ import { Button } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of button. | -| size | "default" | "field" | "small" | `"default"` | Specify the size of button. | -| hasIconOnly | boolean | `false` | Set to `true` for the icon-only variant. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| iconDescription | string | -- | Specify the ARIA label for the button icon. | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| disabled | boolean | `false` | Set to `true` to disable the button. | -| href | string | -- | Set the `href` to use an anchor link. | -| tabindex | string | `"0"` | Specify the tabindex. | -| type | string | `"button"` | Specify the `type` attribute for the button element. | -| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Type | Default value | Description | +| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | `"primary"` | Specify the kind of button. | +| size | "default" | "field" | "small" | `"default"` | Specify the size of button. | +| hasIconOnly | boolean | `false` | Set to `true` for the icon-only variant. | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | +| iconDescription | string | -- | Specify the ARIA label for the button icon. | +| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | +| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). | +| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | +| disabled | boolean | `false` | Set to `true` to disable the button. | +| href | string | -- | Set the `href` to use an anchor link. | +| tabindex | string | `"0"` | Specify the tabindex. | +| type | string | `"button"` | Specify the `type` attribute for the button element. | +| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | ### Slots diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index a14cf22d..d03ac2ea 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -791,7 +791,7 @@ { "kind": "let", "value": "\"primary\"", - "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"", "description": "Specify the kind of button" } ], @@ -923,8 +923,8 @@ [ "click", { - "start": 3947, - "end": 3955, + "start": 3984, + "end": 3992, "type": "EventHandler", "name": "click", "modifiers": [], @@ -934,8 +934,8 @@ [ "mouseover", { - "start": 3962, - "end": 3974, + "start": 3999, + "end": 4011, "type": "EventHandler", "name": "mouseover", "modifiers": [], @@ -945,8 +945,8 @@ [ "mouseenter", { - "start": 3981, - "end": 3994, + "start": 4018, + "end": 4031, "type": "EventHandler", "name": "mouseenter", "modifiers": [], @@ -956,8 +956,8 @@ [ "mouseleave", { - "start": 4001, - "end": 4014, + "start": 4038, + "end": 4051, "type": "EventHandler", "name": "mouseleave", "modifiers": [], diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index bbbd6705..10229c14 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -28,6 +28,14 @@ description: High-level description +### Danger tertiary button + + + +### Danger ghost button + + + ### Button with icon diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 3b8303df..39734839 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -1,7 +1,7 @@