• /
  • EnglishEspañol日本語한국어Português
  • Inicia sesiónComenzar ahora

Button

Buttons are used throughout the product to provide users a way to complete an action. Try to not overuse buttons in your experience. This will help users know exactly what action you would like them to take. Never use more than one primary button in your experience.

Primary Capabilities — the buttons can

  • perform one action
  • perform multiple actions, if multiple buttons are present.

Usage

import { Button } from 'nr1'

Examples

Basic

<div className="nr1-Docs-prettify">
<Button onClick={() => alert('Hello World!')} type={Button.TYPE.PRIMARY}>
Click me
</Button>
<Button
onClick={() => alert('Hello World!')}
type={Button.TYPE.PRIMARY}
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_ADD}
>
Click me
</Button>
<Button
type={Button.TYPE.PRIMARY}
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_ADD}
/>
</div>

Sizes

<div className="nr1-Docs-prettify">
<Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.LARGE}>
Click me
</Button>
<Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.MEDIUM}>
Click me
</Button>
<Button type={Button.TYPE.PRIMARY} sizeType={Button.SIZE_TYPE.SMALL}>
Click me
</Button>
</div>

Types

<div className="nr1-Docs-prettify">
<Button type={Button.TYPE.NORMAL}>Click me</Button>
<Button type={Button.TYPE.PRIMARY}>Click me</Button>
<Button type={Button.TYPE.DESTRUCTIVE}>Click me</Button>
<Button type={Button.TYPE.OUTLINE}>Click me</Button>
<Button type={Button.TYPE.PLAIN}>Click me</Button>
<Button type={Button.TYPE.PLAIN_NEUTRAL}>Click me</Button>
</div>

Disabled state

<div className="nr1-Docs-prettify">
<Button disabled type={Button.TYPE.PRIMARY}>
Click me
</Button>
<Button
disabled
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_ADD}
type={Button.TYPE.PRIMARY}
>
Click me
</Button>
<Button
disabled
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_ADD}
type={Button.TYPE.PRIMARY}
/>
</div>

Loading state

<div className="nr1-Docs-prettify">
<Button loading type={Button.TYPE.PRIMARY}>
Click me
</Button>
<Button
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_ADD}
loading
type={Button.TYPE.PRIMARY}
>
Click me
</Button>
<Button
iconType={
Button.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_ADD}
loading
type={Button.TYPE.PRIMARY}
/>
</div>

Props

ariaControls

string

Pass the id string of the element the Button controls when it's used to expand or open a panel. Use it along with ariaExpanded.

const { expanded } = this.state;
const panelId = 'content-panel';
return (
<>
<Button ariaControls={panelId} ariaExpanded={expanded}>
Expand content
</Button>
<div id={panelId} hidden={!expanded}>
Content
</div>
</>
);

ariaExpanded

boolean

Use it to indicate whether the element the Button controls is expanded or not.Recommended to also check ariaControls and ariaHasPopup examples.

ariaHasPopup

boolean|string

Use it to indicate that the Button toggles an interactive overlay element.The value can be:

ariaLabel

string

Use it to describe better the context of the component's action or in buttons displaying only an icon for users on screen readers.

<Button
iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__SEARCH}
ariaLabel="Search for entities"
/>;

children

node

Content to render inside the button.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

disabled

boolean

Use the disabled state for a button prior to a user filling out the required fields of a form or when a user must complete some other task before the button can be enabled.

iconType

enum

Icon to display. <One of


Button.ICON_TYPE.DATAVIZDATAVIZAREA_CHART,
Button.ICON_TYPE.DATAVIZDATAVIZBAR_CHART,
Button.ICON_TYPE.DATAVIZDATAVIZBILLBOARD_CHART,
Button.ICON_TYPE.DATAVIZDATAVIZBULLET_CHART,
Button.ICON_TYPE.DATAVIZDATAVIZCHART,
Button.ICON_TYPE.DATAVIZDATAVIZCHARTA_ADD,
Button.ICON_TYPE.DATAVIZ
DATAVIZCHARTA_EDIT,
Button.ICON_TYPE.DATAVIZDATAVIZCHARTA_REMOVE,
Button.ICON_TYPE.DATAVIZ
DATAVIZDASHBOARD,
Button.ICON_TYPE.DATAVIZ
DATAVIZDASHBOARDA_ADD,
Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_EDIT,
Button.ICON_TYPE.DATAVIZ
DATAVIZDASHBOARDA_FILTER,
Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_REMOVE,
Button.ICON_TYPE.DATAVIZ
DATAVIZEVENT_FEED_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZHEATMAP_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZLINE_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZMARKDOWN,
Button.ICON_TYPE.DATAVIZ
DATAVIZPIE_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZSCATTER_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZSERVICE_MAP_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZSTACKED_BAR_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZSTACKED_HORIZONTAL_BAR_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZTABLE_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZTRAFFIC_LIGHTS_CHART,
Button.ICON_TYPE.DATAVIZ
DATAVIZVERTICAL_BAR_CHART,
Button.ICON_TYPE.DATE_AND_TIME
DATE_AND_TIMEDATE,
Button.ICON_TYPE.DATE_AND_TIME
DATE_AND_TIMEDATEA_ADD,
Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATEA_REMOVE,
Button.ICON_TYPE.DATE_AND_TIME
DATE_AND_TIMETIME,
Button.ICON_TYPE.DATE_AND_TIME
DATE_AND_TIMETIMEA_ADD,
Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIMEA_REMOVE,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSATTACHMENT,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSDOCUMENTATION,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSEMAIL,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSEMAILV_ALTERNATE,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSFILE,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSFILEA_ADD,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSFILEA_REMOVE,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDER,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDERA_ADD,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSFOLDERA_REMOVE,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTES,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_ADD,
Button.ICON_TYPE.DOCUMENTS
DOCUMENTSNOTESA_EDIT,
Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_REMOVE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWAREANOMALIES,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARECLUSTER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARECLUSTERA_INSPECT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARECLUSTERS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARECLUSTERS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECPU,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOP,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWAREDESKTOPS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWAREDESKTOPS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMEMORY,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILEA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWAREMOBILES_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWAREMOBILES_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARENETWORK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARENETWORKA_INSPECT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARENETWORKS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARENETWORKS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_ADD,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARESERVERA_CONFIGURE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_EDIT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARESERVERA_INSPECT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_PAUSE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARESERVERA_REMOVE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARESERVERS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
HARDWARESERVERS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESTORAGE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_CLUSTER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_CONTAINER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_DEPLOYMENT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_MASTER_NODE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_NAMESPACE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_NODE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_POD,
Button.ICON_TYPE.HARDWARE_AND_SOFTWAREKUBERNETESK8S_SERVICE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREALL_ENTITIES,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATION,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREAPPLICATIONS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREAPPLICATIONS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREBROWSER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREBROWSERA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREBROWSERS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREBROWSERS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECLOUD,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECODE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECONTAINER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECONTROL_CENTER,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECORRELATION,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARECORRELATION_REASONING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASEA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDATABASES_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDATABASES_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDECISIONS,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDESTINATIONS,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDOWNSTREAM_CONNECTION,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREDOWNSTREAM_DEPLOYMENT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREEVENT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREFEED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARELIVE_VIEW,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARELOGS,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREMOBILE_APPLICATION,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREMOBILE_APPLICATIONA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREMOBILE_APPLICATIONS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREMOBILE_APPLICATIONS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMONITORING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARENODE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREOVERVIEW,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPATHWAY,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGIN,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREPLUGINS_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREPLUGINS_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWAREQUERY,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARESERVICE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARESERVICEA_CHECKED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_DISABLED,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARESERVICES_ERROR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_OK,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARE
SOFTWARESERVICES_WARNING,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESOURCES,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESTACK_TRACE,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYNTHESIZED_ENTITY,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYNTHETICS_MONITOR,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESYSTEM,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARETRACES,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARETRAFFIC,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREUPSTREAM_CONNECTION,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREUPSTREAM_DEPLOYMENT,
Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREWORKLOADS,
Button.ICON_TYPE.INTERFACEARROWARROW_BOTTOM,
Button.ICON_TYPE.INTERFACEARROWARROW_BOTTOMV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
ARROWARROW_BOTTOMV_ALTERNATEWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
ARROWARROW_DIAGONAL_BOTTOM_LEFT,
Button.ICON_TYPE.INTERFACE
ARROWARROW_DIAGONAL_BOTTOM_RIGHT,
Button.ICON_TYPE.INTERFACE
ARROWARROW_DIAGONAL_TOP_LEFT,
Button.ICON_TYPE.INTERFACE
ARROWARROW_DIAGONAL_TOP_RIGHT,
Button.ICON_TYPE.INTERFACE
ARROWARROW_HORIZONTAL,
Button.ICON_TYPE.INTERFACE
ARROWARROW_LEFT,
Button.ICON_TYPE.INTERFACE
ARROWARROW_LEFTV_ALTERNATE,
Button.ICON_TYPE.INTERFACEARROWARROW_LEFTV_ALTERNATEWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACEARROWARROW_RIGHT,
Button.ICON_TYPE.INTERFACEARROWARROW_RIGHTV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
ARROWARROW_RIGHTV_ALTERNATEWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
ARROWARROW_TOP,
Button.ICON_TYPE.INTERFACE
ARROWARROW_TOPV_ALTERNATE,
Button.ICON_TYPE.INTERFACEARROWARROW_TOPV_ALTERNATEWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACEARROWARROW_VERTICAL,
Button.ICON_TYPE.INTERFACEARROWEXPAND,
Button.ICON_TYPE.INTERFACEARROWGO_TO,
Button.ICON_TYPE.INTERFACEARROWMOVE,
Button.ICON_TYPE.INTERFACEARROWRESIZE,
Button.ICON_TYPE.INTERFACEARROWRETURN_LEFT,
Button.ICON_TYPE.INTERFACEARROWRETURN_RIGHT,
Button.ICON_TYPE.INTERFACEARROWSHRINK,
Button.ICON_TYPE.INTERFACEARROWSORT,
Button.ICON_TYPE.INTERFACECARETCARET_BOTTOM,
Button.ICON_TYPE.INTERFACECARETCARET_BOTTOMSIZE_8,
Button.ICON_TYPE.INTERFACE
CARETCARET_BOTTOMV_ALTERNATE,
Button.ICON_TYPE.INTERFACECARETCARET_BOTTOMWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
CARETCARET_BOTTOMWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACE
CARETCARET_LEFT,
Button.ICON_TYPE.INTERFACE
CARETCARET_LEFTSIZE_8,
Button.ICON_TYPE.INTERFACECARETCARET_LEFTV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
CARETCARET_LEFTWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACECARETCARET_LEFTWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACECARETCARET_RIGHT,
Button.ICON_TYPE.INTERFACECARETCARET_RIGHTSIZE_8,
Button.ICON_TYPE.INTERFACE
CARETCARET_RIGHTV_ALTERNATE,
Button.ICON_TYPE.INTERFACECARETCARET_RIGHTWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
CARETCARET_RIGHTWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACE
CARETCARET_TOP,
Button.ICON_TYPE.INTERFACE
CARETCARET_TOPSIZE_8,
Button.ICON_TYPE.INTERFACECARETCARET_TOPV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
CARETCARET_TOPWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACECARETCARET_TOPWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOM,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMSIZE_8,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_BOTTOMV_ALTERNATE,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_BOTTOMWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_LEFT,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_LEFTSIZE_8,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_LEFTWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHT,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTSIZE_8,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_RIGHTV_ALTERNATE,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_RIGHTWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_TOP,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_TOPSIZE_8,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
CHEVRONCHEVRON_TOPWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPWEIGHT_BOLDSIZE_8,
Button.ICON_TYPE.INTERFACEINFOANNOUNCEMENT,
Button.ICON_TYPE.INTERFACEINFOHELP,
Button.ICON_TYPE.INTERFACEINFOINFO,
Button.ICON_TYPE.INTERFACEINFOINFOWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
OPERATIONSADJUST,
Button.ICON_TYPE.INTERFACE
OPERATIONSALERT,
Button.ICON_TYPE.INTERFACE
OPERATIONSALERTA_REMOVE,
Button.ICON_TYPE.INTERFACEOPERATIONSALERTS_OFF,
Button.ICON_TYPE.INTERFACE
OPERATIONSALERTS_ON,
Button.ICON_TYPE.INTERFACEOPERATIONSARCHIVE,
Button.ICON_TYPE.INTERFACEOPERATIONSCENTER,
Button.ICON_TYPE.INTERFACEOPERATIONSCLOSE,
Button.ICON_TYPE.INTERFACEOPERATIONSCLOSESIZE_8,
Button.ICON_TYPE.INTERFACE
OPERATIONSCLOSEV_ALTERNATE,
Button.ICON_TYPE.INTERFACEOPERATIONSCONFIGURE,
Button.ICON_TYPE.INTERFACEOPERATIONSCOPY_TO,
Button.ICON_TYPE.INTERFACEOPERATIONSCOPY_TO_CLIPBOARD,
Button.ICON_TYPE.INTERFACEOPERATIONSDOWNLOAD,
Button.ICON_TYPE.INTERFACEOPERATIONSDRAG,
Button.ICON_TYPE.INTERFACEOPERATIONSEDIT,
Button.ICON_TYPE.INTERFACEOPERATIONSEXPORT,
Button.ICON_TYPE.INTERFACEOPERATIONSEXTERNAL_LINK,
Button.ICON_TYPE.INTERFACEOPERATIONSFILTER,
Button.ICON_TYPE.INTERFACEOPERATIONSFILTERA_ADD,
Button.ICON_TYPE.INTERFACE
OPERATIONSFILTERA_REMOVE,
Button.ICON_TYPE.INTERFACEOPERATIONSFILTERV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
OPERATIONSFOLLOW,
Button.ICON_TYPE.INTERFACE
OPERATIONSGROUP,
Button.ICON_TYPE.INTERFACE
OPERATIONSGROUPA_REMOVE,
Button.ICON_TYPE.INTERFACEOPERATIONSGROUPV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
OPERATIONSHIDE,
Button.ICON_TYPE.INTERFACE
OPERATIONSHIDE_OTHERS,
Button.ICON_TYPE.INTERFACE
OPERATIONSHIGHLIGHT,
Button.ICON_TYPE.INTERFACE
OPERATIONSIMPORT,
Button.ICON_TYPE.INTERFACE
OPERATIONSMORE,
Button.ICON_TYPE.INTERFACE
OPERATIONSPAUSE,
Button.ICON_TYPE.INTERFACE
OPERATIONSPAUSE_ALTERNATEV_ALTERNATE,
Button.ICON_TYPE.INTERFACEOPERATIONSPIN,
Button.ICON_TYPE.INTERFACEOPERATIONSPLAY,
Button.ICON_TYPE.INTERFACEOPERATIONSPLAY_ALTERNATEV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
OPERATIONSREARRANGE,
Button.ICON_TYPE.INTERFACE
OPERATIONSREDO,
Button.ICON_TYPE.INTERFACE
OPERATIONSREFRESH,
Button.ICON_TYPE.INTERFACE
OPERATIONSREMOVEV_ALTERNATE,
Button.ICON_TYPE.INTERFACEOPERATIONSREPLYA_REPLY,
Button.ICON_TYPE.INTERFACE
OPERATIONSSEARCH,
Button.ICON_TYPE.INTERFACE
OPERATIONSSEARCHV_ALTERNATE,
Button.ICON_TYPE.INTERFACEOPERATIONSSELECTION,
Button.ICON_TYPE.INTERFACEOPERATIONSSELECTIONV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
OPERATIONSSHARE,
Button.ICON_TYPE.INTERFACE
OPERATIONSSHARE_LINK,
Button.ICON_TYPE.INTERFACE
OPERATIONSSHOW,
Button.ICON_TYPE.INTERFACE
OPERATIONSSKIP_BACK,
Button.ICON_TYPE.INTERFACE
OPERATIONSSKIP_FORWARD,
Button.ICON_TYPE.INTERFACE
OPERATIONSTAG,
Button.ICON_TYPE.INTERFACE
OPERATIONSTRASH,
Button.ICON_TYPE.INTERFACE
OPERATIONSTV_MODE,
Button.ICON_TYPE.INTERFACE
OPERATIONSTV_MODEA_TV_MODE,
Button.ICON_TYPE.INTERFACEOPERATIONSUNDO,
Button.ICON_TYPE.INTERFACEOPERATIONSUNPIN,
Button.ICON_TYPE.INTERFACEOPERATIONSUPLOAD,
Button.ICON_TYPE.INTERFACEPLACEHOLDERSCUSTOM_PLACEHOLDER,
Button.ICON_TYPE.INTERFACEPLACEHOLDERSICON_PLACEHOLDER,
Button.ICON_TYPE.INTERFACESIGNASTERISK,
Button.ICON_TYPE.INTERFACESIGNCHECKMARK,
Button.ICON_TYPE.INTERFACESIGNCHECKMARKV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
SIGNCHECKMARKV_ALTERNATEWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
SIGNCLOSE,
Button.ICON_TYPE.INTERFACE
SIGNDOLLAR_SIGN,
Button.ICON_TYPE.INTERFACE
SIGNEXCLAMATION,
Button.ICON_TYPE.INTERFACE
SIGNEXCLAMATIONV_ALTERNATE,
Button.ICON_TYPE.INTERFACESIGNMINUS,
Button.ICON_TYPE.INTERFACESIGNMINUSV_ALTERNATE,
Button.ICON_TYPE.INTERFACE
SIGNNUMBER,
Button.ICON_TYPE.INTERFACE
SIGNPLUS,
Button.ICON_TYPE.INTERFACE
SIGNPLUSV_ALTERNATE,
Button.ICON_TYPE.INTERFACESIGNTIMES,
Button.ICON_TYPE.INTERFACESIGNTIMESSIZE_8,
Button.ICON_TYPE.INTERFACE
SIGNTIMESV_ALTERNATE,
Button.ICON_TYPE.INTERFACESTATECLOSED,
Button.ICON_TYPE.INTERFACESTATECRITICAL,
Button.ICON_TYPE.INTERFACESTATECRITICALWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACE
STATEDISABLED,
Button.ICON_TYPE.INTERFACE
STATEENABLED,
Button.ICON_TYPE.INTERFACE
STATEHEALTHY,
Button.ICON_TYPE.INTERFACE
STATELOADING,
Button.ICON_TYPE.INTERFACE
STATELOCK,
Button.ICON_TYPE.INTERFACE
STATEOPEN,
Button.ICON_TYPE.INTERFACE
STATEPRIVATE,
Button.ICON_TYPE.INTERFACE
STATEPUBLIC,
Button.ICON_TYPE.INTERFACE
STATEUNAVAILABLE,
Button.ICON_TYPE.INTERFACE
STATEUNLOCK,
Button.ICON_TYPE.INTERFACE
STATEWARNING,
Button.ICON_TYPE.INTERFACE
STATEWARNINGWEIGHT_BOLD,
Button.ICON_TYPE.INTERFACEVIEWENTER_FULL_SCREEN,
Button.ICON_TYPE.INTERFACEVIEWEXIT_FULL_SCREEN,
Button.ICON_TYPE.INTERFACEVIEWGRID_VIEW,
Button.ICON_TYPE.INTERFACEVIEWHIGH_DENSITY_VIEW,
Button.ICON_TYPE.INTERFACEVIEWLAYER_LIST,
Button.ICON_TYPE.INTERFACEVIEWLIST_VIEW,
Button.ICON_TYPE.INTERFACEVIEWSIXTH_SENSE,
Button.ICON_TYPE.INTERFACEVIEWTHEME_TOGGLE,
Button.ICON_TYPE.INTERFACEVIEWTHEME_TOGGLES_DARK,
Button.ICON_TYPE.INTERFACE
VIEWTHEME_TOGGLES_LIGHT,
Button.ICON_TYPE.LOCATIONLOCATIONHOME,
Button.ICON_TYPE.LOCATIONLOCATIONMAP,
Button.ICON_TYPE.LOCATIONLOCATIONPIN,
Button.ICON_TYPE.LOCATIONLOCATIONWORLD,
Button.ICON_TYPE.PROFILESEVENTSCOMMENT,
Button.ICON_TYPE.PROFILESEVENTSCOMMENTA_EDIT,
Button.ICON_TYPE.PROFILES
EVENTSFAVORITE,
Button.ICON_TYPE.PROFILES
EVENTSFAVORITEWEIGHT_BOLD,
Button.ICON_TYPE.PROFILESEVENTSLIKE,
Button.ICON_TYPE.PROFILESUSERSORGANIZATION,
Button.ICON_TYPE.PROFILESUSERSORGANIZATIONA_ADD,
Button.ICON_TYPE.PROFILES
USERSORGANIZATIONA_EDIT,
Button.ICON_TYPE.PROFILESUSERSORGANIZATIONA_REMOVE,
Button.ICON_TYPE.PROFILES
USERSTEAM,
Button.ICON_TYPE.PROFILES
USERSTEAMA_ADD,
Button.ICON_TYPE.PROFILESUSERSTEAMA_EDIT,
Button.ICON_TYPE.PROFILES
USERSTEAMA_REMOVE,
Button.ICON_TYPE.PROFILESUSERSUSER,
Button.ICON_TYPE.PROFILESUSERSUSERA_ADD,
Button.ICON_TYPE.PROFILES
USERSUSERA_EDIT,
Button.ICON_TYPE.PROFILESUSERSUSER__A_REMOVE>,
>

loading

boolean

To indicate whether an action is in progress, especially in the case that it takes more than 1 second to complete, you should display the loading state.

onClick

function

Callback fired any time the user clicks on the button. function (

event: React.MouseEvent
)

sizeType

enum

We recommend you use the normal size button in almost all instances.Use the slim button sparingly as it diminishes the importance of the button. Do not use it solely to fit into a space, but consider increasing the space around a default button.The few cases to use a large button are in marketing-like material for your add-on: introducing it in a splash page or in a hero message. <One of

Button.SIZE_TYPE.LARGE,
Button.SIZE_TYPE.MEDIUM,
Button.SIZE_TYPE.SMALL,
>

spacingType

enum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT. <Array of

<One of
Button.SPACING_TYPE.EXTRA_LARGE,
Button.SPACING_TYPE.LARGE,
Button.SPACING_TYPE.MEDIUM,
Button.SPACING_TYPE.NONE,
Button.SPACING_TYPE.OMIT,
Button.SPACING_TYPE.SMALL,
>
>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

to

shape|string

Location object or url string to link to.

shape

pathname

REQUIRED
string

search

string

hash

string

type

enum

Type can be:

  • Primary — use to call attention to one specific action you want the user to take as a next step.
  • Normal (used as secondary) — use when multiple actions need to be displayed.
  • Outline — use for important actions that are not the main (primary) action of a given view. This variation sits in between the primary and default buttons in terms of hierarchy.
  • Plain — use when multiple actions need to be available that are less important for the user to take.
  • Destructive — use when you have a destructive action like delete or remove, which you would like the user to pause and consider before completing. <One of
    Button.TYPE.DESTRUCTIVE,
    Button.TYPE.NORMAL,
    Button.TYPE.OUTLINE,
    Button.TYPE.PLAIN,
    Button.TYPE.PLAIN_NEUTRAL,
    Button.TYPE.Primary
    >
Copyright © 2025 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.