• /
  • EnglishEspañolFrançais日本語한국어Português
  • Se connecterDémarrer

Cette traduction automatique est fournie pour votre commodité.

En cas d'incohérence entre la version anglaise et la version traduite, la version anglaise prévaudra. Veuillez visiter cette page pour plus d'informations.

Créer un problème

Button

Les boutons sont utilisés dans tout le produit pour fournir à l'utilisateur un moyen d'effectuer une action. Essayez de ne pas abuser des boutons dans votre expérience. Cela aidera l’utilisateur à savoir exactement quelle action vous souhaitez qu’il entreprenne. N'utilisez jamais plus d'un bouton principal dans votre expérience.

Capacités principales — les boutons peuvent

  • effectuer une action
  • effectuer plusieurs actions, si plusieurs boutons sont présents.

Usage

import { Button } from 'nr1'

Exemples

Basique

<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>

Tailles

<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>

État handicapé

<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>

État de chargement

<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>

Accessoires

ariaControls

chaîne

Transmettez la chaîne id de l'élément que Button contrôle lorsqu'il est utilisé pour développer ou ouvrir un panneau. Utilisez-le avec 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

booléen

Utilisez-le pour indiquer si l'élément contrôlé par Button est développé ou non. Il est recommandé de vérifier également les exemples ariaControls et ariaHasPopup .

ariaHasPopup

booléen|chaîne

Utilisez-le pour indiquer que le Button bascule un élément de superposition interactif. La valeur peut être :

ariaLabel

chaîne

Utilisez-le pour mieux décrire le contexte de l'action du composant ou dans les boutons affichant uniquement une icône pour l'utilisateur sur les lecteurs d'écran.

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

children

nœud

Contenu à rendre à l'intérieur du bouton.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

disabled

booléen

Utilisez l'état désactivé pour un bouton avant qu'un utilisateur ne remplisse les champs obligatoires d'un formulaire ou lorsqu'un utilisateur doit effectuer une autre tâche avant que le bouton puisse être activé.

iconType

énum.

Icône à afficher.

<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.DATAVIZDATAVIZCHARTA_EDIT,\ Button.ICON_TYPE.DATAVIZDATAVIZCHARTA_REMOVE,\ Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARD,\ Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_ADD,\ Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_EDIT,\ Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_FILTER,\ Button.ICON_TYPE.DATAVIZDATAVIZDASHBOARDA_REMOVE,\ Button.ICON_TYPE.DATAVIZDATAVIZEVENT_FEED_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZHEATMAP_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZLINE_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZMARKDOWN,\ Button.ICON_TYPE.DATAVIZDATAVIZPIE_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZSCATTER_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZSERVICE_MAP_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZSTACKED_BAR_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZSTACKED_HORIZONTAL_BAR_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZTABLE_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZTRAFFIC_LIGHTS_CHART,\ Button.ICON_TYPE.DATAVIZDATAVIZVERTICAL_BAR_CHART,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATE,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATEA_ADD,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMEDATEA_REMOVE,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIME,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIMEA_ADD,\ Button.ICON_TYPE.DATE_AND_TIMEDATE_AND_TIMETIMEA_REMOVE,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSATTACHMENT,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSDOCUMENTATION,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSEMAIL,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSEMAILV_ALTERNATE,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFILE,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFILEA_ADD,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFILEA_REMOVE,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDER,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDERA_ADD,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSFOLDERA_REMOVE,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTES,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_ADD,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_EDIT,\ Button.ICON_TYPE.DOCUMENTSDOCUMENTSNOTESA_REMOVE,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREANOMALIES,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTER,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERA_INSPECT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARECLUSTERS_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_SOFTWAREHARDWAREDESKTOPS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREDESKTOPS_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_SOFTWAREHARDWAREMOBILES_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWAREMOBILES_WARNING,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKA_INSPECT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARENETWORKS_WARNING,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVER,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_ADD,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_CONFIGURE,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_EDIT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_INSPECT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_PAUSE,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERA_REMOVE,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWAREHARDWARESERVERS_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_SOFTWARESOFTWAREAPPLICATIONS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREAPPLICATIONS_WARNING,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSER,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERA_CHECKED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREBROWSERS_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_SOFTWARESOFTWAREDATABASES_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDATABASES_WARNING,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDECISIONS,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDESTINATIONS,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDOWNSTREAM_CONNECTION,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREDOWNSTREAM_DEPLOYMENT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREEVENT,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREFEED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARELIVE_VIEW,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARELOGS,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATION,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONA_CHECKED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_APPLICATIONS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREMOBILE_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_SOFTWARESOFTWAREPLUGINS_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREPLUGINS_WARNING,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWAREQUERY,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICE,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICEA_CHECKED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_DISABLED,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_ERROR,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_OK,\ Button.ICON_TYPE.HARDWARE_AND_SOFTWARESOFTWARESERVICES_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.INTERFACEARROWARROW_BOTTOMV_ALTERNATEWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_BOTTOM_LEFT,\ Button.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_BOTTOM_RIGHT,\ Button.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_TOP_LEFT,\ Button.ICON_TYPE.INTERFACEARROWARROW_DIAGONAL_TOP_RIGHT,\ Button.ICON_TYPE.INTERFACEARROWARROW_HORIZONTAL,\ Button.ICON_TYPE.INTERFACEARROWARROW_LEFT,\ Button.ICON_TYPE.INTERFACEARROWARROW_LEFTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEARROWARROW_LEFTV_ALTERNATEWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACEARROWARROW_RIGHT,\ Button.ICON_TYPE.INTERFACEARROWARROW_RIGHTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEARROWARROW_RIGHTV_ALTERNATEWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACEARROWARROW_TOP,\ Button.ICON_TYPE.INTERFACEARROWARROW_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.INTERFACECARETCARET_BOTTOMV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECARETCARET_BOTTOMWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECARETCARET_BOTTOMWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_LEFT,\ Button.ICON_TYPE.INTERFACECARETCARET_LEFTSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_LEFTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECARETCARET_LEFTWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECARETCARET_LEFTWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_RIGHT,\ Button.ICON_TYPE.INTERFACECARETCARET_RIGHTSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_RIGHTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECARETCARET_RIGHTWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECARETCARET_RIGHTWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_TOP,\ Button.ICON_TYPE.INTERFACECARETCARET_TOPSIZE_8,\ Button.ICON_TYPE.INTERFACECARETCARET_TOPV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECARETCARET_TOPWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECARETCARET_TOPWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOM,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_BOTTOMWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFT,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_LEFTWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHT,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_RIGHTWEIGHT_BOLDSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOP,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPSIZE_8,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_TOPV_ALTERNATE,\ Button.ICON_TYPE.INTERFACECHEVRONCHEVRON_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.INTERFACEOPERATIONSADJUST,\ Button.ICON_TYPE.INTERFACEOPERATIONSALERT,\ Button.ICON_TYPE.INTERFACEOPERATIONSALERTA_REMOVE,\ Button.ICON_TYPE.INTERFACEOPERATIONSALERTS_OFF,\ Button.ICON_TYPE.INTERFACEOPERATIONSALERTS_ON,\ Button.ICON_TYPE.INTERFACEOPERATIONSARCHIVE,\ Button.ICON_TYPE.INTERFACEOPERATIONSCENTER,\ Button.ICON_TYPE.INTERFACEOPERATIONSCLOSE,\ Button.ICON_TYPE.INTERFACEOPERATIONSCLOSESIZE_8,\ Button.ICON_TYPE.INTERFACEOPERATIONSCLOSEV_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.INTERFACEOPERATIONSFILTERA_REMOVE,\ Button.ICON_TYPE.INTERFACEOPERATIONSFILTERV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSFOLLOW,\ Button.ICON_TYPE.INTERFACEOPERATIONSGROUP,\ Button.ICON_TYPE.INTERFACEOPERATIONSGROUPA_REMOVE,\ Button.ICON_TYPE.INTERFACEOPERATIONSGROUPV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSHIDE,\ Button.ICON_TYPE.INTERFACEOPERATIONSHIDE_OTHERS,\ Button.ICON_TYPE.INTERFACEOPERATIONSHIGHLIGHT,\ Button.ICON_TYPE.INTERFACEOPERATIONSIMPORT,\ Button.ICON_TYPE.INTERFACEOPERATIONSMORE,\ Button.ICON_TYPE.INTERFACEOPERATIONSPAUSE,\ Button.ICON_TYPE.INTERFACEOPERATIONSPAUSE_ALTERNATEV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSPIN,\ Button.ICON_TYPE.INTERFACEOPERATIONSPLAY,\ Button.ICON_TYPE.INTERFACEOPERATIONSPLAY_ALTERNATEV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSREARRANGE,\ Button.ICON_TYPE.INTERFACEOPERATIONSREDO,\ Button.ICON_TYPE.INTERFACEOPERATIONSREFRESH,\ Button.ICON_TYPE.INTERFACEOPERATIONSREMOVEV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSREPLYA_REPLY,\ Button.ICON_TYPE.INTERFACEOPERATIONSSEARCH,\ Button.ICON_TYPE.INTERFACEOPERATIONSSEARCHV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSSELECTION,\ Button.ICON_TYPE.INTERFACEOPERATIONSSELECTIONV_ALTERNATE,\ Button.ICON_TYPE.INTERFACEOPERATIONSSHARE,\ Button.ICON_TYPE.INTERFACEOPERATIONSSHARE_LINK,\ Button.ICON_TYPE.INTERFACEOPERATIONSSHOW,\ Button.ICON_TYPE.INTERFACEOPERATIONSSKIP_BACK,\ Button.ICON_TYPE.INTERFACEOPERATIONSSKIP_FORWARD,\ Button.ICON_TYPE.INTERFACEOPERATIONSTAG,\ Button.ICON_TYPE.INTERFACEOPERATIONSTRASH,\ Button.ICON_TYPE.INTERFACEOPERATIONSTV_MODE,\ Button.ICON_TYPE.INTERFACEOPERATIONSTV_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.INTERFACESIGNCHECKMARKV_ALTERNATEWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACESIGNCLOSE,\ Button.ICON_TYPE.INTERFACESIGNDOLLAR_SIGN,\ Button.ICON_TYPE.INTERFACESIGNEXCLAMATION,\ Button.ICON_TYPE.INTERFACESIGNEXCLAMATIONV_ALTERNATE,\ Button.ICON_TYPE.INTERFACESIGNMINUS,\ Button.ICON_TYPE.INTERFACESIGNMINUSV_ALTERNATE,\ Button.ICON_TYPE.INTERFACESIGNNUMBER,\ Button.ICON_TYPE.INTERFACESIGNPLUS,\ Button.ICON_TYPE.INTERFACESIGNPLUSV_ALTERNATE,\ Button.ICON_TYPE.INTERFACESIGNTIMES,\ Button.ICON_TYPE.INTERFACESIGNTIMESSIZE_8,\ Button.ICON_TYPE.INTERFACESIGNTIMESV_ALTERNATE,\ Button.ICON_TYPE.INTERFACESTATECLOSED,\ Button.ICON_TYPE.INTERFACESTATECRITICAL,\ Button.ICON_TYPE.INTERFACESTATECRITICALWEIGHT_BOLD,\ Button.ICON_TYPE.INTERFACESTATEDISABLED,\ Button.ICON_TYPE.INTERFACESTATEENABLED,\ Button.ICON_TYPE.INTERFACESTATEHEALTHY,\ Button.ICON_TYPE.INTERFACESTATELOADING,\ Button.ICON_TYPE.INTERFACESTATELOCK,\ Button.ICON_TYPE.INTERFACESTATEOPEN,\ Button.ICON_TYPE.INTERFACESTATEPRIVATE,\ Button.ICON_TYPE.INTERFACESTATEPUBLIC,\ Button.ICON_TYPE.INTERFACESTATEUNAVAILABLE,\ Button.ICON_TYPE.INTERFACESTATEUNLOCK,\ Button.ICON_TYPE.INTERFACESTATEWARNING,\ Button.ICON_TYPE.INTERFACESTATEWARNINGWEIGHT_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.INTERFACEVIEWTHEME_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.PROFILESEVENTSFAVORITE,\ Button.ICON_TYPE.PROFILESEVENTSFAVORITEWEIGHT_BOLD,\ Button.ICON_TYPE.PROFILESEVENTSLIKE,\ Button.ICON_TYPE.PROFILESUSERSORGANIZATION,\ Button.ICON_TYPE.PROFILESUSERSORGANIZATIONA_ADD,\ Button.ICON_TYPE.PROFILESUSERSORGANIZATIONA_EDIT,\ Button.ICON_TYPE.PROFILESUSERSORGANIZATIONA_REMOVE,\ Button.ICON_TYPE.PROFILESUSERSTEAM,\ Button.ICON_TYPE.PROFILESUSERSTEAMA_ADD,\ Button.ICON_TYPE.PROFILESUSERSTEAMA_EDIT,\ Button.ICON_TYPE.PROFILESUSERSTEAMA_REMOVE,\ Button.ICON_TYPE.PROFILESUSERSUSER,\ Button.ICON_TYPE.PROFILESUSERSUSERA_ADD,\ Button.ICON_TYPE.PROFILESUSERSUSERA_EDIT,\ Button.ICON_TYPE.PROFILESUSERSUSER__A_REMOVE>,

>

loading

booléen

Pour indiquer si une action est en cours, notamment dans le cas où elle prend plus d'une seconde à se terminer, vous devez afficher l'état de chargement.

onClick

fonction

Le rappel est déclenché à chaque fois que l'utilisateur clique sur le bouton.

function (
event: React.MouseEvent
)

sizeType

énum.

Nous vous recommandons d'utiliser le bouton de taille normale dans presque tous les cas. Utilisez le bouton fin avec parcimonie car cela diminue l'importance du bouton. Ne l'utilisez pas uniquement pour s'intégrer dans un espace, mais envisagez d'augmenter l'espace autour d'un bouton par défaut. Les rares cas où l'on peut utiliser un gros bouton sont dans le matériel de type marketing pour votre module complémentaire : l'introduire dans une page d'accueil ou dans un message héros.

<One of

Button.SIZE_TYPE.LARGE,\ Button.SIZE_TYPE.MEDIUM,\ Button.SIZE_TYPE.SMALL,

>

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez 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

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien.

forme

pathname

OBLIGATOIRE
chaîne

search

chaîne

hash

chaîne

type

énum.

Le type peut être :

  • Principal — utilisé pour attirer l’attention sur une action spécifique que vous souhaitez que l’utilisateur effectue comme prochaine étape.

  • Normal (utilisé comme secondaire) — à utiliser lorsque plusieurs actions doivent être affichées.

  • Plan — à utiliser pour les actions importantes qui ne sont pas l’action principale (primaire) d’une vue donnée. Cette variante se situe entre les boutons principaux et par défaut en termes de hiérarchie.

  • Simple — à utiliser lorsque plusieurs actions doivent être disponibles et sont moins importantes à réaliser pour l'utilisateur.

  • Destructeur — à utiliser lorsque vous avez une action destructrice comme supprimer ou retirer, que vous souhaitez que l'utilisateur interrompe et considère avant de terminer.

    <One of

    Button.TYPE.DESTRUCTIVE,\ Button.TYPE.NORMAL,\ Button.TYPE.OUTLINE,\ Button.TYPE.PLAIN,\ Button.TYPE.PLAIN_NEUTRAL,\ Button.TYPE.Primary

    >
Droits d'auteur © 2025 New Relic Inc.
RecrutementConditions de servicePolitique DMCAAvis de confidentialitéCookiesLoi britannique sur l'esclavage

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