## Usage

The `<Button />` component is an interactive element allowing users to perform an action, navigate to a page, or change a view. The button's `label` helps inform what action will occur when the user interacts with it.

## Tone

The button has four available tones, each with a specific use case in mind.

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button label="Primary (default)" />
  <Button tone="neutral" label="Neutral" />
  <Button tone="critical" label="Critical" />
  <Button tone="ghost" label="Ghost" />
</Flex>
```

### Primary

The primary button is used for interactions where the most emphasis is required. Avoid using more than one primary button in a scene at any one time.

### Critical

The critical button is used for destructive primary actions, e.g. to confirm deletion of user data. As this type of action requires the most emphasis — just like the primary — avoid using critical and primary buttons grouped next to each other.

### Neutral

When an interaction requires less emphasis the neutral button can be used to draw less attention from the user. Commonly used in conjunction with one primary button, to indicate one or more secondary actions.

### Ghost

Use the ghost button when you don't need any particular emphasis on the action to draw the users' eye. A good use case is the "Close" action of a modal, or an "Open menu" action — the user can expect where these actions might be located and therefore no emphasis is required. The ghost button is also great for cases where a lot of actions would be rendered in close proximity to each other, e.g. to trigger a "More options" menu in a table row.

## Size

There are two button sizes, `small` and `medium` (default).

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button size="small" label="Small" />
  <Button label="Medium (default)" />
</Flex>
```

### Small

This size is used along with other ‘small’ components or where the default sizing appears too large.

### Medium

This is the default size for buttons and to be used along with other ‘medium’ components.

## Block

Use the `block` prop to make the button fill its container's width.

```tsx live
<Button block label="Block" />
```

## Icons

Icons can be used next to labels to help clarify an action.

Pass in the icon component via the `icon` prop. Default icon placement is `left`, but you can override this using `iconPlacement` prop.

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button label="Left icon" icon={AddIcon} />
  <Button label="Right icon" icon={ChevronRightIcon} iconPlacement="right" />
</Flex>
```

### Consistent icon placement

If buttons containing icons are placed next to each other, both buttons should have the icon placed on the same side.

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button label="Cancel" icon={CloseIcon} tone="neutral" />
  <Button label="Delete" icon={AddIcon} tone="critical" />
</Flex>
```

### Icon only button

In some cases button text is not necessary to clarify an action. Visually hide the label using the `iconOnly` prop. A label must still be provided for assistive technologies.

<Notice>
  <Text>
    EDS recommends to not use tooltips to explain what an icon-only button means or does. If the icon is not considered
    intuitive enough for sighted users, then always consider having a visual label on the button.
  </Text>
</Notice>

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button iconOnly icon={CloseIcon} label="Close dialog" />
  <Button iconOnly icon={CloseIcon} label="Close dialog" tone="neutral" />
  <Button iconOnly icon={CloseIcon} label="Close dialog" tone="critical" />
  <Button iconOnly icon={CloseIcon} label="Close dialog" tone="ghost" />
</Flex>
```

## States

### Loading

The `loading` prop sets the button to the loading state, which will also automatically disable the button. Any icon and/or text label will get an `opacity: 0`-style, so the width of the button remains the same.

```tsx live
<Button loading label="Loading button" />
```

### Disabled

The `disabled` prop prevents the user from activating the button and styles it appropriately.

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button disabled label="Primary (default)" />
  <Button disabled tone="neutral" label="Neutral" />
  <Button disabled tone="critical" label="Critical" />
  <Button disabled tone="ghost" label="Ghost" />
</Flex>
```

## onClick

Any function passed to the `onClick` prop is called when the button is activated.

It passes the React Mouse `event` as a parameter.

```tsx live
<Button label="onClick" onClick={(event) => alert(`Clicked: ${event.timeStamp}`)} />
```

## Type

The `type` prop is used to set the button's native type attribute. This is useful when you need to submit a form, or reset it.

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Button type="submit" label="Submit" />
  <Button type="reset" label="Reset" />
</Flex>
```

## Button-styled link

Use the `<ButtonLink />` component when you want a link (`<a>`) with the visual appearance of a Button. You should use a ButtonLink instead of a Button when you need to perform navigation, like linking to another page, rather than triggering an action like submitting a form.

Like the [Link](/packages/link/) component, ButtonLink also respects any global link override passed down via the `<Core />` context. See an example of this at [Global link override](/packages/core#global-link-override). You can also use the `shouldIgnoreCoreLinkComponent` prop when need to "ignore" the override for specific instances.

```tsx live
<Flex gap="small">
  <ButtonLink label="ButtonLink" href="#" />
  <ButtonLink iconOnly icon={LinkIcon} label="ButtonLink" href="#" />
</Flex>
```

## Link-styled button

Use the [`<TextButton />`](/packages/link#link-styled-button) component when you want a button (`<button>`) with the visual appearance of a link.

This component is part of the [`@eds/link`](/packages/link/) package and shares most of its styling and prop logic with the [`Link`](/packages/link/) component.

### Provider overrides

When using a [global link override](/packages/core/#global-link-override) in your `<Core />` and you need to pass any prop overrides **for a specific instance of a `<ButtonLink />`** in your app (ie not in your `<Core />`), you can use the `providerOverrides` prop.

Pass in an object with the props from your chosen routing framework's link component that you wish to override. The example below shows how you can override for example the `scroll` prop when using `next/link`, and also how to implement their exported type to make it type-safe.

```jsx
import { LinkProps as NextLinkProps } from 'next/link';

<ButtonLink<Partial<NextLinkProps>>
  providerOverrides={{ scroll: false }}
  label="Customers"
  href="/customers"
  tone="neutral"
  size="small"
/>
```

## Buttons visually inside components

In cases where you need a button visually inside a component, particularly an input, we have a dedicated component called `<AdornmentButton />`. This is primarily an internal helper used to build other components like [SearchInput](/packages/search-input/), which uses a close icon in the button, to clear the input's value.

Important to note that the adornment button relies on the `inputSize` being passed through, as its pressable area should be as tall as the height of the input.

The adornment button also supports children, for when you need a visual text label e.g.

```tsx live
/** A simplified example of how to compose a custom input with an AdornmentButton */
const sharedInputStyles = getInputStyles({ size: 'medium' });
const paddingForAdornmentButton = {
  /**
   * Padding that equals the width of the positioned absolute AdornmentButton
   * (which gets its width from the same inputSize token)
   */
  paddingRight: inputSize['medium'],
};

/**
 * The `disabled` prop is also required, and AdornmentButton does not allow it to be undefined or null,
 * so you have to convert it to be a pure Boolean, e.g. `<AdornmentButton disabled={!!isDisabled}>`
 */
const isDisabled = undefined;

return (
  <Flex position="relative">
    <Flex
      as="input"
      type="search"
      disabled={isDisabled}
      className={css(sharedInputStyles, paddingForAdornmentButton)}
    />

    <Box position="absolute" right={0}>
      <AdornmentButton icon={AddIcon} ariaLabel="Clear value" inputSize="medium" disabled={!!isDisabled} />
    </Box>

    <FocusIndicator />
  </Flex>
);
```

## Custom button

The `<CustomButton />` component is a utility component for building case-specific buttons that require more content than simply a label and/or an icon, e.g. the `<SelectDropdownButton />` and `<AllFiltersButton />` buttons.

Some of its features are:

- Label content is passed via `children`, that accepts any `StrictReactNode`.
- Only supports `neutral` or `ghost` tone.
- Override padding styles with the `paddingLeft` and `paddingRight` props.

NOTE: It's important to not pass any interactive elements as children, as this will cause unexpected focus stops. Avoid using this component unless absolutely necessary, always prefer to use the `<Button />` component instead.

```tsx live
<CustomButton paddingLeft="xxsmall" paddingRight="xxsmall">
  <Flex gap="xsmall" alignItems="center">
    <Avatar size="small" />
    <Divider vertical />
    <Tag label="Tag" size="small" weight="outlined" />
    <Divider vertical />
    <NumberBadge number={1000} weight="subtle" />
  </Flex>
</CustomButton>
```

An interactive element to perform an action or to navigate.

Button

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources