Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@spectrum-web-components/button
Advanced tools
An **sp-button** represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a
An sp-button represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various attention-getting needs.
<sp-button>Hello world</sp-button>
There are many button variants to choose from in Spectrum. The variant
attribute controls the main variant of the button, and a few other boolean
attributes can be combined to apply sub-variants, e.g. quiet
.
<sp-button variant="cta">CTA</sp-button>
<sp-button variant="primary">Primary</sp-button>
<sp-button variant="secondary">Secondary</sp-button>
<sp-button variant="negative">Negative</sp-button>
<sp-button quiet variant="primary">Quiet Primary</sp-button>
<sp-button quiet variant="secondary">Quiet Secondary</sp-button>
<sp-button quiet variant="negative">Quiet Negative</sp-button>
sp-buttons can have a label, or a label with an icon. An icon is provided by
placing an icon component to the icon
slot. The icon may be an sp-icon
or an
SVG.
<sp-icons-medium></sp-icons-medium>
<sp-button variant="primary">Label only</sp-button>
<sp-button variant="primary">
<sp-icon slot="icon" size="s" name="ui:HelpMedium"></sp-icon>
Icon + Label
</sp-button>
<sp-button variant="primary">
<svg
slot="icon"
viewBox="0 0 36 36"
focusable="false"
aria-hidden="true"
role="img"
>
<path
d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
></path>
</svg>
SVG Icon + Label
</sp-button>
In addition to the variant, sp-buttons have a disabled state visual state
which can be applied by adding the attribute disabled
. All spectrum-button
variants support the In addition to affectng the visual state, the disabled
attribute prevents focus and disallows click
events.
<sp-button variant="primary">Normal</sp-button>
<sp-button variant="primary" disabled>Disabled</sp-button>
Events handlers for clicks and other user actions can be registered on a
spectrum-button
just as on a normal HTML button
element.
<sp-button onclick="alert('spectrum-button clicked!')">Click me!</sp-button>
The autofocus
attribute sets focus to the sp-button when the component
mounts. This is useful for setting focus to a specific sp-button when a
popover or dialog opens.
<sp-button autofocus>Confirm</sp-button>
FAQs
An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a
The npm package @spectrum-web-components/button receives a total of 3,797 weekly downloads. As such, @spectrum-web-components/button popularity was classified as popular.
We found that @spectrum-web-components/button demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.