Button (legacy)

Additional information to be included in the context of analytics events that come from button.

The base styling to apply to the button.

Set the button to autofocus on mount.

Text content to be rendered in the button.

Add a classname to the button.

Provides a URL that's used when the button is a link styled as a button.

Places an icon within the button, after the button's text.

Places an icon within the button, before the button's text.

An optional name used to identify this component to press listeners. For example, interaction tracing. For more information, see UFO integration into Design System components.

Set if the button is disabled.

Change the style to indicate the button is selected.

Handler called on blur.

Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.

Handler called on focus.

Used to 'overlay' something over a button. This is commonly used to display a loading spinner.

Option to fit button width to its parent width.

Set the amount of padding in the button.

Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Pass type down to the button.

Additional information to be included in the context of analytics events that come from button.

The base styling to apply to the button.

Set the button to autofocus on mount.

Text content to be rendered in the button.

Add a classname to the button.

Provides a URL that's used when the button is a link styled as a button.

Places an icon within the button, after the button's text.

Places an icon within the button, before the button's text.

An optional name used to identify this component to press listeners. For example, interaction tracing. For more information, see UFO integration into Design System components.

Set if the button is disabled.

Change the style to indicate the button is selected.

Handler called on blur.

Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.

Handler called on focus.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Option to fit button width to its parent width.

Set the amount of padding in the button.

Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Pass type down to the button.

Additional information to be included in the context of analytics events that come from button.

The base styling to apply to the button.

Set the button to autofocus on mount.

Text content to be rendered in the button.

Add a classname to the button.

Provides a URL that's used when the button is a link styled as a button.

Places an icon within the button, after the button's text.

Places an icon within the button, before the button's text.

An optional name used to identify this component to press listeners. For example, interaction tracing. For more information, see UFO integration into Design System components.

Set if the button is disabled.

Change the style to indicate the button is selected.

Handler called on blur.

Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.

Handler called on focus.

Option to fit button width to its parent width.

Set the amount of padding in the button.

Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Slow + discouraged custom theme API See custom theme guide for usage details

Pass type down to the button.