Oft ist es hilfreich, einen Button zu haben, der wie ein Link funktioniert. Das ist möglich, indem du das href‐Attribut setzt, wodurch die Komponente unter der Haube als <a> gerendert wird. Dadurch erhältst du das gesamte Standard‐Link‐Verhalten des Browsers (z. B. Ctrl oder Shift + ) und kannst zudem die Attribute target und download nutzen.
Wenn ein target gesetzt ist, erhält der Link aus Sicherheitsgründen automatisch rel="noreferrer noopener".
Icon‐Buttons
Wenn nur ein Icon in den Standard‐Slot eingefügt wird, wird der Button zu einem Icon‐Button. In diesem Fall ist es wichtig, dem Icon ein Label für Nutzer:innen mit assistiven Technologien zu geben. Icon‐Buttons können jedes Erscheinungsbild und jede Variante nutzen.
Wie erwartet können Buttons eine benutzerdefinierte Breite erhalten, indem Inline‐Styles an die Komponente übergeben werden (oder eine CSS‐Klasse verwendet wird). Das ist nützlich, um Buttons auf kleineren Bildschirmen über die volle Breite ihres Containers zu strecken.
Dieses Beispiel zeigt, wie du Buttons mit einer benutzerdefinierten Klasse stylen kannst. Dies ist der empfohlene Ansatz, wenn du zusätzliche Erscheinungsbilder hinzufügen möchtest. Um ein bestehendes Erscheinungsbild anzupassen, ändere den Selektor so, dass er das appearance‐Attribut des Buttons anspricht anstatt einer Klasse (z. B. pc-button[appearance="primary"]).
<pc-buttonclass="awesome-button">Awesome‐Button</pc-button><style>pc-button.awesome-button::part(base) {margin-block-end:0.25rem;background-color:var(--pc-color-warning-fill-normal);color:var(--pc-color-warning-on-normal);border:var(--pc-border-width-m)var(--pc-border-style)var(--pc-color-warning-border-normal);border-radius:0.5rem;box-shadow:00.25rem0var(--pc-color-warning-border-normal);transition:none;}@media(hover: hover){pc-button.awesome-button::part(base):hover{background-color:color-mix( in oklab,var(--pc-color-warning-fill-normal),var(--pc-color-mix-hover));color:color-mix( in oklab,var(--pc-color-warning-on-normal),var(--pc-color-mix-hover));border-color:color-mix( in oklab,var(--pc-color-warning-border-normal),var(--pc-color-mix-hover));box-shadow:00.25rem0color-mix( in oklab,var(--pc-color-warning-border-normal),var(--pc-color-mix-hover));}}pc-button.awesome-button::part(base):active{background-color:color-mix( in oklab,var(--pc-color-warning-border-normal),var(--pc-color-mix-hover));color:color-mix( in oklab,var(--pc-color-warning-on-normal),var(--pc-color-mix-hover));border-color:color-mix( in oklab,var(--pc-color-warning-border-normal),var(--pc-color-mix-hover));box-shadow:none;translate:00.25rem;}</style>
The button’s size. Typ: "small" | "medium" | "large"
"medium"
disabled
Disables the button. Typ: boolean
false
pill
Draws a pill‐style button. Typ: boolean
false
type
The type of button. Note that the default value is button instead of submit, which is opposite of how native <button> elements behave. When the type is submit, the button will submit the surrounding form. Typ: "button" | "submit" | "reset"
"button"
name
The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. Typ: string
""
value
The value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter. This attribute is ignored when the href attribute is present. Typ: string
""
href
When set, the underlying button will be rendered as an <a> with this href instead of a <button>. Typ: string
""
target
Tells the browser where to open the link. It should only be used when the href attribute is present. Typ: "_blank" | "_parent" | "_self" | "_top" | undefined
‐
rel
When using the href attribute, this attribute will map to the underlying link’s rel attribute. Unlike regular links, the default set for this attribute is noreferrer noopener to prevent security exploits. However, if you’re using target to point to a specific tab or window, this will prevent that from working properly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively. Typ: string
"noreferrer noopener"
download
Tells the browser to download the linked file as this file name. Only used when the href attribute is present. Typ: string | undefined
‐
formAction formaction
Used to override the form owner’s action attribute. Typ: string | undefined
‐
formEnctype formenctype
Used to override the form owner’s enctype attribute. Typ: "application/x-www-form-url-encoded"
| "multipart/form-data"
| "text/plain" | undefined
‐
formMethod formmethod
Used to override the form owner’s method attribute. Typ: "GET" | "POST" | undefined
‐
formNoValidate formnovalidate
Used to override the form owner’s novalidate attribute. Typ: boolean | undefined
‐
formTarget formtarget
Used to override the form owner’s target attribute. Typ: "_self"
| "_blank"
| "_parent"
| "_top"
| string | undefined
‐
updateComplete
Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.
Wenn du den Auto‐Loader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du dich für „Cherry‐Picking“ entschieden hast, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
CDN (Skript‐Tag)CDN (Import)npm (Import)
Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
Ui! Du bist in die gefährlichen Lande von Placer Toolkit geraten. Version 0 ist veraltet und entspricht nicht den EU‐Datenschutzstandards, einschließlich DSGVO.
Willst du die neuesten Kräfte, Sicherheit und Compliance? Bleib bei der aktuellen Version von Placer Toolkit!
Ups!Aufladen!
Unsere Website ist zu 100 % frei von Cookies! Wir legen großen Wert auf deine Privatsphäre und speichern daher keinerlei Cookies oder persönliche Informationen über dich.
Dein Browserverlauf bleibt sauber und deine Daten sind geschützt, ganz im Einklang mit modernen Datenschutzstandards wie der DSGVO. Genieße deinen Besuch ganz ohne digitale Cookies! 🍪🚫