Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
block | block | If true, the button will have display=block and width=100% | boolean | false |
color | color | Color of button from DigiKey's color palette | "alternate" | "outline" | "primary" | "reverseOutline" | "secondary" | "primary" |
disabled | disabled | Whether button is disabled. When disabled, button is greyed and cannot be clicked. | boolean | false |
form | form | If type='submit' or 'reset', this links the button to an external form with the given id | string | |
href | href | If set, the button will have the same appearance, but will actually be a link with the specified url | string | |
size | size | Size of the button | "lg" | "md" | "sm" | "md" |
target | target | If href is set, target determines where to open the link. Options are '_blank', '_self', '_parent', '_top', or the name of an iframe | string | |
type | type | If set to 'submit' or 'reset', the button will have that role inside a form | "button" | "reset" | "submit" | "button" |
Primary
<dk-button>Button</dk-button>Link
<dk-button href="/docs/components/button/web-component">
Link Button
</dk-button>Sizes
<div>
<h3>primary</h3>
<dk-button color="primary" size="sm">
Small
</dk-button>
<dk-button color="primary" size="md">
Medium
</dk-button>
<dk-button color="primary" size="lg">
Large
</dk-button>
<h3>secondary</h3>
<dk-button color="secondary" size="sm">
Small
</dk-button>
<dk-button color="secondary" size="md">
Medium
</dk-button>
<dk-button color="secondary" size="lg">
Large
</dk-button>
<h3>alternate</h3>
<dk-button color="alternate" size="sm">
Small
</dk-button>
<dk-button color="alternate" size="md">
Medium
</dk-button>
<dk-button color="alternate" size="lg">
Large
</dk-button>
</div>