Status
The Status Symbol combines color and shape to create a standard and consistent way to indicate the status of a device or feature.Guidelines
Web Components Usage
- Installation
Install the Astro UXDS Status package via Command Line (Preferred Method)
npm i --save @astrouxds/rux-status
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
- Import the Astro Status 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 { RuxStatus } from '@astrouxds/rux-status/rux-status.js'
- Render the Astro Status Web Component
Pass properties as attributes of the Astro Status custom element:<rux-status status="critical"></rux-status>
Properties
| Property | Type | Default | Required | Description | | -------- | ------ | ------- | -------- | --------------------------------------------------------------------------------------------------------- | |status
| String | ''
| Yes | Sets the status symbol, valid options are critical
, serious
, caution
, normal
, standby
and off
|Basic HTML Usage
- Include the Astro UXDS CSS file
Latest release is available in the static css directory.<link rel="stylesheet" href="/your-project/path/astro.css" />
- Markup the component using HTML and the Astro CSS classes
Astro CSS classes follow the BEM-style naming convention. Apply attribues as BEM-style class suffixes after rux-status--
.<div class="rux-status rux-status--critical"></div>
Attributes
| Attribute | Type | Default | Required | Description | | -------------- | ----- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |rux-status--
| Class | - | Yes | Sets the status symbol, valid options are rux-status--critical
, rux-status--serious
, rux-status--caution
, rux-status--normal
, rux-status--standby
and rux-status--off
|Revision History
4.0
- Replaced SVG status elements with PNG sprite for improved performance
- Moved Advanced Status to its own component, Astro UXDS Monitoring Icon (see Astro 4 migration note below)
- Removed
satcom_
prefix from HTML/CSS versions - Removed
::after
psuedo class in HTML/CSS version in favor of simpler background image - Removed undocumented small status variant
- 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.
3.0
- Removed Master Off Button Style
- Replaced various properties with css custom properties to support
- Removed
.satcom
class definition - Removed
narrow
/short
definitions
1.4
- Added
rux_
prefixes and BEM-compatible classes to allsatcom_
-prefixed elements. NOTE:satcom_
will be removed in a future version - Disabled user selection of text on all buttons
- Removed redundant background hover from
disabled
state by using:not()
on the:hover
state - Removed redundant background hover from
master off
by using:not()
on the:hover
state // deprecate after 1.4 - Fixed Firefox alignment issue where text was misaligned vertically
- Renamed
half-height
toshort
andhalf-width
tonarrow
(Note:rux_
only,satcom_
retains old syntax) - Removed
user-select
and placed it in astro.css to apply to all input types - Embedded master off icon and removed the additional states required to handle icons and gradient backgrounds