Button

Result

Loading...

Live Editor

<Button>Button</Button>

Appearance

Result

Loading...

Live Editor

const appearances = ["solid", "faded", "outline", "ghost", "text"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {appearances.map((appearance) => (
      <Button key={appearance} appearance={appearance}>
        {appearance}
      </Button>
    ))}
  </div>
);

Variant

Result

Loading...

Live Editor

const variants = [
  "primary",
  "secondary",
  "neutral",
  "danger",
  "warning",
  "success",
  "dark",
  "light",
];

render(
  <div style={{ display: "flex", gap: "10px" }}>
    {variants.map((variant) => (
      <Button key={variant} variant={variant}>
        {variant}
      </Button>
    ))}
  </div>
);

Size

Result

Loading...

Live Editor

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {sizes.map((size) => (
      <Button key={size} size={size}>
        Button {size}
      </Button>
    ))}
  </div>
);

Full Width

Result

Loading...

Live Editor

<Button fullWidth>Full Width</Button>

Shape

Result

Loading...

Live Editor

const shapes = ["rounded", "circular", "square"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {shapes.map((shape) => (
      <Button key={shape} shape={shape}>
        {shape}
      </Button>
    ))}
  </div>
);

Fixed Ratio

When just using icons, you can set the fixedRatio prop to make sure the button's width and height are equal.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
  <Button shape="rounded" fixedRatio>
    <IconBell />
  </Button>
  <Button shape="circular" variant="success" fixedRatio>
    <IconCheck />
  </Button>
  <Button shape="square" variant="warning" fixedRatio>
    <IconClock />
  </Button>
</div>

Slots

Content can be added to the start and end of the button using the slotStart and slotEnd props.

Result

Loading...

Live Editor

// Icons from https://tabler.io/docs/icons/react
<div style={{ display: "flex", gap: "10px" }}>
  <Button slotEnd={<IconArrowRight />}>With icon</Button>
  <Button slotEnd={<IconChevronDown />}>With icon</Button>
  <Button slotEnd={<IconX />}>With icon</Button>
  <Button slotStart="😀">With Emoji</Button>
  <Button slotStart="'Slot Start'" slotEnd="'Slot End'">
    With Text
  </Button>
</div>

Badges

You can use a badge in one of the slots. It is recommended that the badge be one size smaller than the button size. So a md button would use a sm badge.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px" }}>
  <Button
    slotEnd={
      <Badge size="sm" appearance="faded" shape="circular" fixedRatio>
        3
      </Badge>
    }
  >
    Button
  </Button>
  <Button
    shape="circular"
    variant="danger"
    slotEnd={
      <Badge size="sm" appearance="faded" variant="danger">
        Danger
      </Badge>
    }
  >
    Button
  </Button>
  <Button
    appearance="outline"
    shape="square"
    slotEnd={
      <Badge size="sm" appearance="outline" shape="square">
        99+
      </Badge>
    }
  >
    Button
  </Button>
</div>

If you put the badge is the children of the button you can use the Badge's position prop to position it to the edge of the button.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px" }}>
  <Button>
    Button
    <Badge variant="danger" size="sm" position="top-right" />
  </Button>
  <Button>
    Button
    <Badge variant="success" size="sm" position="top-right" isNumeric>
      3
    </Badge>
  </Button>
</div>

Justify

The justify prop can be used to align the content of the button.

Result

Loading...

Live Editor

<div>
  <Button fullWidth mb="3" justify="start">
    start
  </Button>
  <Button fullWidth mb="3" justify="center">
    center
  </Button>
  <Button fullWidth mb="3" justify="end">
    end
  </Button>
  <Button fullWidth mb="3" justify="space-between" slotStart="😀" slotEnd="😠">
    space-between
  </Button>
  <Button fullWidth mb="3" justify="space-around" slotStart="😀" slotEnd="😠">
    space-around
  </Button>
</div>

Loading

When the loading prop is set, the Button button will be disabled and show a Loader in the middle of the button.

Result

Loading...

Live Editor

<Button loading>Button</Button>

Disabled

When the disabled prop is set, the Button button will be disabled.

Result

Loading...

Live Editor

<Button disabled onClick={() => console.log("on click")}>
  Button
</Button>

Props

CSS Variables

root

Variable	Value
--tipTop-Button__borderWidth	1px
--tipTop-Button__borderRadius	var(--tipTop__borderRadius--normal)
--tipTop-Button__fontSize	var(--tipTop__fontSize--normal)
--tipTop-Button__fontWeight	var(--tipTop__fontWeight--medium)
--tipTop-Button__transition	background-color 0.15s ease-in-out, color 0.15s ease-in-out
--tipTop-Button--disabled__opacity	0.5

Variants

solid

Change the solid background color on hover

Variable	Value
--tipTop-Button--solid-hovered__bgColorMix-colorSpace	srgb
--tipTop-Button--solid-hovered__bgColorMix-percent	70%
--tipTop-Button--solid-hovered__bgColorMix-blendColor	#fff

faded

Change the background color

Variable	Value
--tipTop-Button--faded__bgColorMix-colorSpace	srgb
--tipTop-Button--faded__bgColorMix-percent	20%
--tipTop-Button--faded__bgColorMix-blendColor	#fff

Change the background color on hover

Variable	Value
--tipTop-Button--faded-hovered__bgColorMix-colorSpace	srgb
--tipTop-Button--faded-hovered__bgColorMix-percent	30%
--tipTop-Button--faded-hovered__bgColorMix-blendColor	#fff

Darken the text color over a faded/hovered background

Variable	Value
--tipTop-Button--faded__textColorMix-colorSpace	srgb
--tipTop-Button--faded__textColorMix-percent	65%
--tipTop-Button--faded__textColorMix-blendColor	#000

Slots

Variable	Value
--tipTop-Button-slot__marginBlockStart	0
--tipTop-Button-slot__marginBlockEnd	0
--tipTop-Button-slot__marginInlineStart	0
--tipTop-Button-slot__marginInlineEnd	0

Slot Start

Variable	Value
--tipTop-Button-slotStart__marginBlockStart	0
--tipTop-Button-slotStart__marginBlockEnd	0
--tipTop-Button-slotStart__marginInlineStart	calc(var(--tipTop__space--0-5) * -1)
--tipTop-Button-slotStart__marginInlineEnd	var(--tipTop__space--2)

Slot End

Variable	Value
--tipTop-Button-slotEnd__marginBlockStart	0
--tipTop-Button-slotEnd__marginBlockEnd	0
--tipTop-Button-slotEnd__marginInlineStart	var(--tipTop__space--2)
--tipTop-Button-slotEnd__marginInlineEnd	calc(var(--tipTop__space--0-5) * -1)

Children

Variable	Value
--tipTop-Button-children__marginBlockStart	0
--tipTop-Button-children__marginBlockEnd	0
--tipTop-Button-children__marginInlineStart	0
--tipTop-Button-children__marginInlineEnd	0

Size

xs

Variable	Value
--tipTop-Button--xs__fontSize	var(--tipTop__fontSize--xs)
--tipTop-Button--xs__paddingBlockStart	var(--tipTop__space--0-5)
--tipTop-Button--xs__paddingBlockEnd	var(--tipTop__space--0-5)
--tipTop-Button--xs__paddingInlineStart	var(--tipTop__space--1)
--tipTop-Button--xs__paddingInlineEnd	var(--tipTop__space--1)

sm

Variable	Value
--tipTop-Button--sm__fontSize	var(--tipTop__fontSize--sm)
--tipTop-Button--sm__paddingBlockStart	var(--tipTop__space--1-5)
--tipTop-Button--sm__paddingBlockEnd	var(--tipTop__space--1-5)
--tipTop-Button--sm__paddingInlineStart	var(--tipTop__space--2)
--tipTop-Button--sm__paddingInlineEnd	var(--tipTop__space--2)

normal

Variable	Value
--tipTop-Button--normal__fontSize	var(--tipTop__fontSize--normal)
--tipTop-Button--normal__paddingBlockStart	var(--tipTop__space--2-5)
--tipTop-Button--normal__paddingBlockEnd	var(--tipTop__space--2-5)
--tipTop-Button--normal__paddingInlineStart	var(--tipTop__space--3-5)
--tipTop-Button--normal__paddingInlineEnd	var(--tipTop__space--3-5)

medium

Variable	Value
--tipTop-Button--md__fontSize	var(--tipTop__fontSize--md)
--tipTop-Button--md__paddingBlockStart	var(--tipTop__space--3-5)
--tipTop-Button--md__paddingBlockEnd	var(--tipTop__space--3-5)
--tipTop-Button--md__paddingInlineStart	var(--tipTop__space--4)
--tipTop-Button--md__paddingInlineEnd	var(--tipTop__space--4)

large

Variable	Value
--tipTop-Button--lg__fontSize	var(--tipTop__fontSize--xl)
--tipTop-Button--lg__paddingBlockStart	var(--tipTop__space--4)
--tipTop-Button--lg__paddingBlockEnd	var(--tipTop__space--4)
--tipTop-Button--lg__paddingInlineStart	var(--tipTop__space--5)
--tipTop-Button--lg__paddingInlineEnd	var(--tipTop__space--5)

extra large

Variable	Value
--tipTop-Button--xl__fontSize	var(--tipTop__fontSize--3xl)
--tipTop-Button--xl__paddingBlockStart	var(--tipTop__space--4)
--tipTop-Button--xl__paddingBlockEnd	var(--tipTop__space--4)
--tipTop-Button--xl__paddingInlineStart	var(--tipTop__space--6)
--tipTop-Button--xl__paddingInlineEnd	var(--tipTop__space--6)