Push Button ​

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.

Guidelines ​

• Astro UXDS: Toggle & Push Button

Web Components Usage ​

1. Installation ​

Install the Astro UXDS Push Button package via Command Line (Preferred Method) ​

npm i --save @astrouxds/rux-push-button

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

git clone https://github.com/RocketCommunicationsInc/astro-components.git

Or, download the Astro UXDS Components as a .zip

2. Import the Astro Push Button Web Component ​

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'

import { RuxPushButton } from '@astrouxds/rux-push-button/rux-push-button.js'

3. Render the Astro Push Button Web Component ​

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>

<rux-push-button checked>Push button label</rux-push-button>

Basic HTML Usage ​

1. Include the Astro UXDS CSS file ​

Latest release is available in the static css directory.

<link rel="stylesheet" href="/your-project/path/astro.css" />

<link rel="stylesheet" href="/your-project/path/astro.css" />

2. Markup the component using HTML and the Astro CSS classes ​

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>

<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>

<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>

Attributes ​

For more information about AstroUXDS usage outside of a Web Component environment, please see Astro UXDS Stylesheets

Revision History ​

4.0 ​

• 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.

2.1 ​

• Moved Pushbuttons to its own style sheet

1.4 ​

• Added rux_ prefixes and BEM-compatible classes to all satcom_-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

Properties ​

Events ​

Shadow Parts ​

Dependencies ​

Depends on ​

• rux-icon

Graph ​

graph TD;
  rux-push-button --> rux-icon
  style rux-push-button fill:#f9f,stroke:#333,stroke-width:4px

graph TD;
  rux-push-button --> rux-icon
  style rux-push-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS