update docs

This commit is contained in:
Cory LaViska
2024-11-01 11:57:11 -04:00
parent 50fc61bd06
commit a6080560b9

View File

@@ -81,7 +81,7 @@ Use the `pill` attribute to give buttons rounded edges.
### Link Buttons
It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.
It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `rel`, `target`, and `download` attributes.
```html {.example}
<wa-button href="https://example.com/">Link</wa-button>
@@ -89,10 +89,6 @@ It's often helpful to have a button that works like a link. This is possible by
<wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
```
:::info
When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
:::
### Setting a Custom Width
As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.