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

feat(button): add isSelected prop for icon-only, ghost buttons

Browse source
This commit is contained in:
Eric Y Liu 2021-03-05 14:17:29 -08:00
commit 5f3450839a
5 changed files with 36 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/COMPONENT_API.json
View file

@ -368,6 +368,16 @@
"constant": false,
"reactive": false
},
{
"name": "isSelected",
"kind": "let",
"description": "Set to `true` to enable the selected state for an icon-only, ghost button",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "hasIconOnly",
"kind": "let",

13
docs/src/pages/components/Button.svx
View file

@ -2,7 +2,12 @@
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Preview from "../../components/Preview.svelte";
let index = 1;
</script>
### Primary button
@ -55,6 +60,14 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
### Selected icon-only, ghost button
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
<Button isSelected={index === 0} kind="ghost" iconDescription="Bold" icon={TextBold16} on:click={() => (index = 0)} />
<Button isSelected={index === 1} kind="ghost" iconDescription="Italicize" icon={TextItalic16} on:click={() => (index = 1)} />
<Button isSelected={index === 2} kind="ghost" iconDescription="Underline" icon={TextUnderline16} on:click={() => (index = 2)} />
### Link button
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.