Constructor
JavaScript:
-
new Coral.Button()
ordocument.createElement('button', 'coral-button')
HTML Tag:
-
<button is="coral-button">
Extends
- Coral.Component
- HTMLButtonElement
Sub-components
Static Properties
-
Coral.Button.iconPosition {String}
-
Properties:
Name Type Value Description RIGHT String right Position should be right of the button label. LEFT String left Position should be left of the button label. -
Coral.Button.size {String}
-
Properties:
Name Type Value Description MEDIUM String M A medium button is the default, normal sized button. LARGE String L A large button, which is larger than a medium button. -
Coral.Button.variant {String}
-
Properties:
Name Type Value Description CTA String cta A button that is meant to grab the user's attention. PRIMARY String primary A button that indicates that the button's action is the primary action. SECONDARY String secondary A default, gray button DEFAULT String secondary An alias to secondary, included for backwards compatibility. QUIET String quiet A button with no border or background. WARNING String warning A button that indicates that the button's action is dangerous. MINIMAL String minimal A minimal button with no background or border.
Enumeration representing the icon position inside the button.
Enumeration representing button sizes.
Enum for button variant values.
Instance Properties
-
instance.block {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- block
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.icon {String}
-
- Default Value:
- ""
- HTML Attribute:
- icon
- See:
-
instance.iconPosition {Coral.Button.iconPosition}
Reflected -
- Default Value:
- Coral.Button.iconPosition.LEFT
- HTML Attribute:
- iconposition
-
instance.iconSize {Coral.Icon.size}
-
- Default Value:
- Coral.Icon.size.SMALL
- HTML Attribute:
- iconsize
- See:
-
instance.label {HTMLElement}
-
-
instance.selected {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- selected
-
instance.size {Coral.Button.size}
Reflected -
- Default Value:
- Coral.Button.size.MEDIUM
- HTML Attribute:
- size
-
instance.variant {Coral.Button.variant}
Reflected -
- Default Value:
- Coral.Button.variant.SECONDARY
- HTML Attribute:
- variant
Expands the button to the full width of the parent.
Whether this component is hidden or not.
Specifies the icon name used inside the button. See Coral.Icon for valid icon names.
Position of the icon relative to the label. If no
iconPosition
is provided, it will be set on the
left side by default.
Size of the icon. It accepts both lower and upper case sizes.
The label of the button.
Whether the button is selected.
The size of the button. It accepts both lower and upper case sizes. Currently only "M" (the default) and "L"
are available.
The button's variant.
Methods
-
instance.get
-
- Parameters:
-
Name Type Description property String The name of the property to fetch the value of. - Returns:
-
Property value. {*}
- Inherited From:
-
instance.hide
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.off
-
- Parameters:
-
Name Type Optional Description eventName String No
The event name to stop listening for. selector String Yes
The selector that was used for event delegation. func function No
The function that was passed to on()
.useCapture Boolean Yes
Only remove listeners with useCapture
set to the value passed in. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.on
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to listen for. selector String Yes
The selector to use for event delegation. func function No
The function that will be called when the event is triggered. useCapture Boolean Yes
Whether or not to listen during the capturing or bubbling phase. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.remove
-
- Inherited From:
-
instance.set
-
- Parameters:
-
Name Type Description property String The name of the property to set. value * The value to set the property to. silent Boolean If true, events should not be triggered as a result of this set. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.show
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.trigger
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to trigger. props Object Yes
Additional properties to make available to handlers as event.detail
.bubbles Boolean Yes
Set to false
to prevent the event from bubbling.cancelable Boolean Yes
Set to false
to prevent the event from being cancelable. - Returns:
-
CustomEvent object {CustomEvent}
- Inherited From:
Get the value of a property.
Hide this component.
Remove an event listener.
Add an event listener.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
Set a single property.
Show this component.
Trigger an event.
Events
-
coral-component:attached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:detached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:ready
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.
- since 1.9.0, use
Triggered when the component is attached to the DOM.
Triggered when the component is detached to the DOM.
Triggerred when the component has been upgraded and is ready for use.