Buttons

Buttons communicate actions that users can take

Design Code Button Button
PRIMARY SECONDARY CAUTION TERTIARY
NORMAL Button Button Button Button
DISABLED Button Button Button Button
Ghost Destructive Secondary Grey Secondary Blue
Button Button Button Button
Destructive Secondary Destructive Tertiary Tertiary Grey
Button Button Button

Pupose

Variant Usage Example
Primary Use primary buttons for highest-priority actions that are required to complete the user's task. Button
Secondary Use secondary buttons for quieter, but still important actions. They can live on their own, be paired with primary buttons, and also paired with other secondary buttons. Secondary buttons provide less visual noise, and support the visual hierarchy of the primary button. Button
Caution Utilize the 'Caution' button for actions that demand special attention or carry significant consequences. Its distinctive design is intended to alert users, prompting careful consideration before proceeding. Button
Tertiary The 'Tertiary' button is designed for less critical actions within the user interface, providing a subtle option that doesn't draw immediate attention. Button

Usage

When using this component, you must provide a standard HTML Button Element as the only light DOM child of aq-button.

<nile-button variant="primary">Publish</nile-button>

HTML

<nile-button variant="primary" size="medium">Button</nile-button>

Button

Slots

Name Description
(default) The button's label.
prefix A presentational prefix icon or similar element.
suffix A presentational suffix icon or similar element.

Attributes & Properties

Name Description Type Default
variant The button's theme variant. 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' 'default'
size The button's size. 'small' | 'medium' | 'large' 'medium'
caret Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. boolean false
loading Draws the button in a loading state. boolean false
disabled Disables the button. boolean false
hide-border Hides the button border boolean false
outline Draws an outlined button. boolean false
pill Draws a pill-style button with rounded edges. boolean false
circle Draws a circular icon button. When this attribute is present, the button expects a single <nile-icon> in the default slot. boolean false
type The type of button. Note that the default value is button instead of submit, which is opposite of how native <button> elements behave. When the type is submit, the button will submit the surrounding form. 'button' | 'submit' | 'reset' 'button'
name The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when href is present. string ''
value The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when href is present. string ''
href When set, the underlying button will be rendered as an <a> with this href instead of a <button>. string ''
target Tells the browser where to open the link. Only used when href is present. '_blank' | '_parent' | '_self' | '_top' -
rel When using href, this attribute will map to the underlying link's rel attribute. Unlike regular links, the default is noreferrer noopener to prevent security exploits. However, if you're using target to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively. string 'noreferrer noopener'
download Tells the browser to download the linked file as this filename. Only used when href is present. string | undefined -

Events

Name Description Event Detail
nile-blur Emitted when the button loses focus. -
nile-focus Emitted when the button gains focus. -
nile-init Emitted when the component connects. -
nile-destroy Emitted when the component disconnects. -

Methods

Name Description Arguments
click() Simulates a click on the button. -
focus() Sets focus on the button. options: FocusOptions
blur() Removes focus from the button. -

Slots

Name Description
(default) Default component content slot (label)
prefix slot for a presentational prefix icon or similar element after default slot.
suffix slot for a presentational prefix icon or similar element before default slot.

CSS Parts

Name Description
base The component's base wrapper.
prefix The container that wraps the prefix.
label The button's label.
suffix The container that wraps the suffix.
caret The button's caret icon, an <nile-icon> element.

Dependencies

nile-icon , nile-spinner