Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@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, and icon, or both. 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">
<sp-icon slot="icon" size="s" name="ui:HelpMedium"></sp-icon>
</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
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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.