Button

Button renders Falcon’s legacy button styles, including colors, sizing, gutters, icon layouts, and polymorphic rendering.

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return <Button color="primary">Button</Button>;
}

Colors

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Button color="primary">primary</Button>
      <Button color="secondary">secondary</Button>
      <Button color="special">special</Button>
      <Button color="success">success</Button>
      <Button color="warning">warning</Button>
      <Button color="danger">danger</Button>
      <Button color="marketing-blue">marketing-blue</Button>
      <Button color="marketing-green">marketing-green</Button>
      <Button color="gray">gray</Button>
      <Button color="dark-gray">dark-gray</Button>
      <Button color="jd-green">jd-green</Button>
      <Button color="corteva">corteva</Button>
      <Button color="rabo">rabo</Button>
      <Button color="farmop">farmop</Button>
      <Button color="goose">goose</Button>
      <Button color={false}>-</Button>
    </div>
  );
}

Size

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
      <Button color="primary" size={24}>
        24
      </Button>

      <Button color="primary" size={32}>
        32
      </Button>

      <Button color="primary" size={36}>
        36
      </Button>

      <Button color="primary" size={44}>
        44
      </Button>

      <Button color="primary" fontSize={20} size={56}>
        56
      </Button>

      <Button color="primary" size={false}>
        -
      </Button>
    </div>
  );
}

Min Width

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Button color="primary" minWidth="min-width">
        &quot;min-width&quot;
      </Button>

      <Button color="primary" minWidth="min-width-large">
        &quot;min-width-large&quot;
      </Button>

      <Button color="primary" minWidth={false}>
        false
      </Button>
    </div>
  );
}

Disabled

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Button color="primary" disabled>
      Button
    </Button>
  );
}

Outline

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Button color="primary" outline>
      Button
    </Button>
  );
}

Border None

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Button borderNone color="primary" outline>
      Button
    </Button>
  );
}

Gutter

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Button color="primary" gutter={0} minWidth={false}>
        &quot;0&quot;
      </Button>

      <Button color="primary" gutter={12} minWidth={false}>
        &quot;12&quot;
      </Button>

      <Button color="primary" gutter={16} minWidth={false}>
        &quot;16&quot;
      </Button>

      <Button color="primary" gutter={24} minWidth={false}>
        &quot;24&quot;
      </Button>

      <Button color="primary" gutter={32} minWidth={false}>
        &quot;32&quot;
      </Button>

      <Button color="primary" gutter={36} minWidth={false}>
        &quot;36&quot;
      </Button>
    </div>
  );
}

Container and Cell

ButtonContainer and ButtonCell compose a button’s inner layout when it contains both an icon and text. Use className="hidden-xxs" on the label cell to hide it at the smallest breakpoint, producing an icon-only button on mobile.

Code

import {
  Button,
  ButtonCell,
  ButtonContainer,
  Icon,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Button color="primary">
        <ButtonContainer>
          <ButtonCell>
            <Icon name="tank" size="24" />
          </ButtonCell>

          <ButtonCell className="hidden-xxs">Prepend icon</ButtonCell>
        </ButtonContainer>
      </Button>

      <Button color="primary">
        <ButtonContainer>
          <ButtonCell className="hidden-xxs">Append icon</ButtonCell>

          <ButtonCell>
            <Icon name="tank" size="24" />
          </ButtonCell>
        </ButtonContainer>
      </Button>

      <Button color="primary">
        <ButtonContainer>
          <ButtonCell className="hidden-xxs">Append icon</ButtonCell>

          <ButtonCell>
            <Icon name="tank" size="24" />
          </ButtonCell>

          <ButtonCell className="hidden-xxs">Prepend icon</ButtonCell>
        </ButtonContainer>
      </Button>
    </div>
  );
}

Icon Button

Code

import { Button, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Button color="primary" iconButton>
      <Icon name="tank" size="24" />
    </Button>
  );
}

Customize Rendered Element

Code

import { Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Button
      as="a"
      color="primary"
      href="https://example.com"
      rel="noopener noreferrer"
      target="_blank"
    >
      Open Example site in a new tab
    </Button>
  );
}

API

Button

Props

as

as?: T

borderNone

borderNone?: boolean

color

color?: false | "success" | "warning" | "danger" | "primary" | "secondary" | "special" | "marketing-blue" | "marketing-green" | "gray" | "dark-gray" | "jd-green" | "corteva" | "rabo" | "farmop" | "goose"

fontSize

fontSize?: number

fontSizeBreakpoints

fontSizeBreakpoints?: Partial<Record<Breakpoint, number>>

fullWidth

fullWidth?: boolean

fullWidthXs

fullWidthXs?: boolean

gradient

gradient?: boolean

gutter

gutter?: ButtonGutter

gutterBreakpoints

gutterBreakpoints?: Partial<Record<Breakpoint, 0 | 12 | 16 | 24 | 32 | 36>>

iconButton

iconButton?: boolean

minWidth

minWidth?: false | "min-width" | "min-width-large"

outline

outline?: boolean

size

size?: ButtonSize

sizeBreakpoints

sizeBreakpoints?: Partial<Record<Breakpoint, false | 24 | 32 | 36 | 44 | 56>>

ButtonCell

Props

children

children?: React.ReactNode

className

className?: string

ButtonContainer

Props

children

children?: React.ReactNode

className

className?: string