Buttons - Evergreen — ContextQMD

Appearances

The Button component has an appearance property with 3 available values: default, primary, and minimal.

jsx

function DefaultButtonExample() {
  return (
    <>
      <Button marginRight={16}>Default</Button>
      <Button marginRight={16} appearance="primary">
        Primary
      </Button>
      <Button marginRight={16} appearance="minimal">
        Minimal
      </Button>
    </>
  )
}

Intents

In addition to the appearance — a Button can also have a intent property. The intent property can be none (default), success, or danger

jsx

function IntentButtonExample() {
  return (
    <>
      <Button marginRight={16} intent="none">
        None
      </Button>
      <Button marginRight={16} intent="success">
        Success
      </Button>
      <Button marginRight={16} intent="danger">
        Danger
      </Button>
    </>
  )
}

Disabled State

Buttons support disabled states to indicate that a user can not take an action on a particular CTA. It intentionally prevents pointer-events from happening on the element.

jsx

function DisabledButtonExample() {
  return <Button disabled>Continue</Button>
}

Loading State

Buttons also support an isLoading property, which shows a loading indicator, while disabling the button, as well.

jsx

function LoadingButtonExample() {
  return <Button isLoading>Continue</Button>
}

Mixing appearance and intent

The intent property works with any appearance.

jsx

function MixedIntentAndAppearanceExample() {
  return (
    <>
      <Button marginRight={16} appearance="primary" intent="none">
        None
      </Button>
      <Button marginRight={16} appearance="primary" intent="success">
        Success
      </Button>
      <Button marginRight={16} appearance="primary" intent="danger">
        Danger
      </Button>
    </>
  )
}

Button Sizes

By default buttons and controls have a height of 32px based on the default theme. Out of the box there are three sizes: small, medium, and large. It is possible to change this by passing an explicit height to the button, as well.

jsx

function ButtonSizesExample() {
  return (
    <>
      <Button marginRight={12} size="small">
        Height 24
      </Button>
      <Button marginRight={12} size="medium">
        Height 32
      </Button>
      <Button marginRight={12} size="large">
        Height 40
      </Button>
      <Button marginRight={12} height={48}>
        Height 48
      </Button>
      <Button marginRight={12} height={56}>
        Height 56
      </Button>
    </>
  )
}

Buttons with an Icon

Buttons support an icon either before or after the label via the iconBefore or iconAfter props. Avoid using both icons in a button at the same time.

jsx

function ButtonIconExample() {
  return (
    <>
      <Button marginY={8} marginRight={12} iconAfter={CogIcon}>
        Settings
      </Button>
      <Button marginY={8} marginRight={12} iconBefore={EditIcon}>
        Edit
      </Button>
      <Button marginY={8} marginRight={12} iconBefore={ManualIcon}>
        Docs
      </Button>
      <Button marginY={8} marginRight={12} iconBefore={TrashIcon} intent="danger">
        Delete...
      </Button>
      <Button marginY={8} marginRight={12} iconBefore={SearchIcon}>
        Search
      </Button>
      <Button marginY={8} marginRight={12} iconAfter={CaretDownIcon}>
        Filter
      </Button>
    </>
  )
}

Icon Buttons

Evergreen also supports icon-only buttons for a lighter-weight toolbar-like treatment. They support the same API as regular buttons.

jsx

function IconButtonExample() {
  return (
    <Pane display="flex" alignItems="center">
      <IconButton icon={CogIcon} marginRight={majorScale(2)} />
      <IconButton icon={TrashIcon} intent="danger" marginRight={majorScale(2)} />
      <IconButton icon={TickIcon} intent="success" />
    </Pane>
  )
}