Button
draft
Button element used with forms and functionality. For a link element <a> styled as a button, please refer to Link component documentation.
<button class="nbhd-button" type="button">
Button Label</button>Primary
<button class="nbhd-button nbhd-button-primary" type="button" aria-label="Additional context for button">
Primary Button</button>Secondary
<button class="nbhd-button nbhd-button-secondary" type="button" aria-label="Additional context for button">
Secondary Button</button>Underlined
<button class="nbhd-button nbhd-button-underlined" type="button" aria-label="Additional context for button">
Underlined Button</button>Element Properties
| Name | Type | Default | Description |
|---|---|---|---|
| label |
string
|
Content for text displayed. | |
| type |
button | submit | reset
|
button
|
Type of button. |
| cssClass |
string
|
Additional CSS class(es). | |
| ariaLabel |
string
|
Content for additional context. |
CSS Properties
The following CSS Properties are available to update styling when provided with componentRenovation.
It is ideal to use the default component styling and only leverage the componentRenovation feature in extreme cases.
Refer to the Component Renovation guidelines on how to use.
Remember...with great power, comes great responsibility!
| Property | Description |
|---|---|
--nbhd-button-background-color
|
Controls the background color. |
--nbhd-button-background-color-hover
|
Controls the background color for hover state. |
--nbhd-button-background-position
|
Controls the background position. |
--nbhd-button-background-size
|
Controls the background size. |
--nbhd-button-border-color
|
Controls the border color. |
--nbhd-button-border-radius
|
Controls the border radius |
--nbhd-button-border-style
|
Controls the border style. |
--nbhd-button-border-width
|
Controls the border width. |
--nbhd-button-cursor
|
Controls the cursor. |
--nbhd-button-display
|
Controls the display. |
--nbhd-button-font-size
|
Controls the font size. |
--nbhd-button-font-stack
|
Controls the font family. |
--nbhd-button-font-style
|
Controls the font style. |
--nbhd-button-font-weight
|
Controls the font weight. |
--nbhd-button-letter-spacing
|
Control the letter spacing. |
--nbhd-button-padding-block
|
Controls the block padding. |
--nbhd-button-padding-inline
|
Controls the inline padding. |
--nbhd-button-text-align
|
Controls the text alignment. |
--nbhd-button-text-color
|
Controls the text color. |
--nbhd-button-text-color-hover
|
Controls the text color for hover state. |
--nbhd-button-text-decoration
|
Controls the text decoration. |
--nbhd-button-text-transform
|
Controls the text transform. |
--nbhd-button-transition-function
|
Controls the transition function. Example ease or ease-in-out.
|
--nbhd-button-transition-duration
|
Controls the transition duration length. |
--nbhd-button-transition-property
|
Controls the properties used for transition effect. |
CSS Properties for Primary
| Property | Description |
|---|---|
--nbhd-button-primary-background-color
|
Controls the background color for the primary button. |
--nbhd-button-primary-background-color-hover
|
Controls the background color for the primary button hover state. |
--nbhd-button-primary-border-color
|
Controls the border color for primary button. |
-nbhd-button-primary-text-color
|
Controls the text color for the primary button. |
--nbhd-button-primary-text-color-hover
|
Controls the text color for primary button hover state. |
CSS Properties for Secondary
| Property | Description |
|---|---|
--nbhd-button-secondary-background-color
|
Controls the background color for the secondary button. |
--nbhd-button-secondary-background-color-hover
|
Controls the background color for the secondary button hover state. |
--nbhd-button-secondary-border-color
|
Controls the border color for secondary button. |
-nbhd-button-secondary-text-color
|
Controls the text color for the secondary button. |
--nbhd-button-secondary-text-color-hover
|
Controls the text color for secondary button hover state. |