Pushbuttons are a variant of the toggle button which incorporate label and action into a single user interface element. Pushbuttons may provide a useful interface element where screen real estate is at a premium.
npm i --save @astrouxds/rux-push-button
You may use Yarn, NPM, or your Node package manager of choice. The --save
flag adds this component as a dependency in your package.json
file.
Alternatively, download the Astro UXDS Component Library source to your project.
Via CLI:
git clone https://github.com/RocketCommunicationsInc/astro-components.git
Or, download the Astro UXDS Components as a .zip
This example assumes you're using the NPM package in node_modules
. Otherwise, import the component using the path to the Astro Components directory in your project.
import { RuxPushButton } from '@astrouxds/rux-push-button/rux-push-button.js'
Pass properties as attributes of the Astro Push Button custom element.
Provide a label for the Push Button inside the component node using the component’s slot.
<rux-push-button checked>Push button label</rux-push-button>
Property | Type | Default | Required | Description |
---|---|---|---|---|
disabled |
Boolean | false |
No | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. |
checked |
Boolean | false |
No | Checks the button via HTML checked attribute. Button takes on a distinct "enabled" or "selected" visual state. |
Latest release is available in the static css directory.
<link rel="stylesheet" href="/your-project/path/astro.css" />
Astro CSS classes follow the BEM-style naming convention.
<div class="rux-push-button">
<input class="rux-push-button__input" id="pb1" type="checkbox"></input>
<label class="rux-push-button__button" for="pb1">Push button label</label>
</div>
Apply attributes such as disabled
and/or checked
on the <input>
element.
<div class="rux-push-button">
<input class="rux-push-button__input" id="pb1" type="checkbox" disabled checked></input>
<label class="rux-push-button__button" for="pb1">Push button label</label>
</div>
Attribute | Type | Default | Required | Description |
---|---|---|---|---|
disabled |
Boolean | false |
No | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. |
checked |
Boolean | false |
No | Checks the button via HTML checked attribute. Button takes on a distinct "enabled" or "selected" visual state. |
For more information about AstroUXDS usage outside of a Web Component environment, please see Astro UXDS Stylesheets
- Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.
- Moved Pushbuttons to its own style sheet
- Added
rux_
prefixes and BEM-compatible classes to allsatcom_
-prefixed elements. NOTE:satcom_
will be removed in a future version - Removed prefixed linear gradients
- Removed prefixed transition
- Fixed added colon to checked pseudo class (e.g., checked became :checked)
- Alignment issue fixed on toggle button label
- Updated to WCAG colors
- Updated transition speed