mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Revise docs (#416)
* chore: add license badge to README * perf(docs): ignore node_modules in markdown preprocessor * docs: remove tabs for install commands on homepage * docs(button-set): improve copy * docs(button): improve usage for icon-only, link buttons * docs: various copy improvements
This commit is contained in:
parent
71c15db2ca
commit
b7bf9ea1f0
9 changed files with 48 additions and 41 deletions
|
@ -42,10 +42,18 @@ description: High-level description
|
|||
|
||||
### Icon-only button
|
||||
|
||||
<Button icon={Add16} hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" />
|
||||
Set `hasIconOnly` to `true` to use the icon-only button variant.
|
||||
|
||||
**Note:** you must provide an `iconDescription` for the button tooltip.
|
||||
|
||||
The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
|
||||
|
||||
<Button hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
|
||||
|
||||
### 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.
|
||||
|
||||
<Button href="#">Link button</Button>
|
||||
|
||||
### Custom element
|
||||
|
|
|
@ -8,7 +8,9 @@ source: Button/ButtonSet.svelte
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Default (juxtaposed)
|
||||
### Default
|
||||
|
||||
Buttons in a button set are juxtaposed by default.
|
||||
|
||||
<ButtonSet>
|
||||
<Button kind="secondary">Cancel</Button>
|
||||
|
@ -17,6 +19,8 @@ source: Button/ButtonSet.svelte
|
|||
|
||||
### Stacked
|
||||
|
||||
Set `stacked` to `true` to use the stacked variant.
|
||||
|
||||
<ButtonSet stacked>
|
||||
<Button icon={Login16}>Log in</Button>
|
||||
<Button kind="ghost">Sign up</Button>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
### Default
|
||||
|
||||
The `Search` component is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
|
||||
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
|
||||
|
||||
<Search />
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue