Buttons ​

Buttons allow users to trigger actions.

Guidelines ​

• Astro UXDS: Buttons

Web Components Usage ​

2. Render the Astro Button Web Component ​

Pass properties as attributes of the Astro Button custom element:

<rux-button size="large" disabled secondary>
  Large disabled secondary button
</rux-button>

<rux-button size="large" disabled secondary>
  Large disabled secondary button
</rux-button>

The component auto-imports the default Astro Icon Web Component for icons, if you specify one:

<rux-button icon="settings">
  Button with icon using astro UXDS icon web component
</rux-button>

<rux-button icon="settings">
  Button with icon using astro UXDS icon web component
</rux-button>

Also, you can use Slots to define icons within buttons. This method is best if you need to override the default icon library SVG file:

<rux-button>
    <rux-icon icon="custom" library="/icons/custom.svg" viewBox="0 0 128 128"></rux-icon>
    Slotted icon button
  </rux-button>

<rux-button>
    <rux-icon icon="custom" library="/icons/custom.svg" viewBox="0 0 128 128"></rux-icon>
    Slotted icon button
  </rux-button>

In this situation, you do not need to specify a size for the icon component -- the button's size attribute will define the appropriate size of the icon.

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.

Configure the component using native HTML attributes or BEM-style class suffixes after rux-button--.

<button class="rux-button">Submit</button>

<button class="rux-button rux-button--large rux-button--secondary" disabled>
  Large disabled secondary button
</button>

<button class="rux-button">Submit</button>

<button class="rux-button rux-button--large rux-button--secondary" disabled>
  Large disabled secondary button
</button>

The basic HTML/CSS usage supports icons if using Web Components (and importing the Astro Icon Component):

<button class="rux-button rux-button--icon">
  <rux-icon class="rux-icon rux-button__icon" icon="settings" color="white"></rux-icon>
  Button with icon using astro UXDS icon web component
</button>

<button class="rux-button rux-button--icon">
  <rux-icon class="rux-icon rux-button__icon" icon="settings" color="white"></rux-icon>
  Button with icon using astro UXDS icon web component
</button>

Otherwise, wrap your icon SVG in an HTML element with the BEM-style classes "rux-icon rux-button__icon":

<button class="rux-button rux-button--icon">
  <div class="rux-icon rux-button__icon">
    <svg ... ></svg>
  </div>
  Button with local icon
</button>

<button class="rux-button rux-button--icon">
  <div class="rux-icon rux-button__icon">
    <svg ... ></svg>
  </div>
  Button with local icon
</button>

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

Revision History ​

4.1 ​

• Add styles for and example of using slots for Icon child component

4.0 ​

• Swapped kebab-cased icon-only attribute for standard camelCase iconOnly
• Deprecated type attribute in favor of separate size, iconOnly, and secondary attributes. default type is No longer supported.
• Fixed the width of the small icon-only button and ensured icon-only buttons show No text, even if text is provided
• Fixed secondary button icon color
• Re-enabled missing focus styles on buttons.
• Removed undocumented critical button style.
• 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 all satcom_-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 to short and half-width to narrow (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

Properties ​

Shadow Parts ​

Dependencies ​

Used by ​

• rux-dialog

Depends on ​

• rux-icon

Graph ​

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

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

Built with StencilJS