Button

Basic

A simple button component that responds to press events.

Tap me

<Button onPress={() => console.log("Button tapped")}>Tap me</Button>

Sizes

You can choose between sm, md, lg, and xl sizes.

Quick save

Add to cart

Get started

Subscribe now

<Button size="sm">Quick save</Button>
<Button size="md">Add to cart</Button>
<Button size="lg">Get started</Button>
<Button size="xl">Subscribe now</Button>

Variants

You can choose between primary is the default variant for the Button component. Use this variant for the actions that allows the user to accomplish their most common or most important goal.

Confirm order

View details

Learn more

<Button variant="primary">Confirm order</Button>
<Button variant="secondary">View details</Button>
<Button variant="tertiary">Learn more</Button>

With Icons

You can optionally add an icon both on the left and on the right side of the button text.

Use the Button.LeftIcon and Button.RightIcon components to include the icon you want to display.

Add to cart

Continue

Download

View on map

See all

{/* With left icon */}
<Button>
  <Button.LeftIcon>
    <ShoppingCart />
  </Button.LeftIcon>
  Add to cart
</Button>

{/* With right icon */}
<Button>
  Continue
  <Button.RightIcon>
    <ArrowRight />
  </Button.RightIcon>
</Button>

{/* Icon only */}
<Button>
  <Button.LeftIcon>
    <Heart />
  </Button.LeftIcon>
</Button>

{/* Different sizes with icons */}
<HStack space="$4" alignItems="center">
  <Button size="sm">
    <Button.LeftIcon>
      <Plus />
    </Button.LeftIcon>
  </Button>
  <Button size="md">
    <Button.LeftIcon>
      <Bell />
    </Button.LeftIcon>
  </Button>
  <Button size="lg">
    <Button.LeftIcon>
      <Settings />
    </Button.LeftIcon>
  </Button>
  <Button size="xl">
    <Button.LeftIcon>
      <RefreshCw />
    </Button.LeftIcon>
  </Button>
</HStack>

{/* Secondary variant with icons */}
<Button variant="secondary">
  <Button.LeftIcon>
    <Download />
  </Button.LeftIcon>
  Download
</Button>

<Button variant="secondary">
  Share
  <Button.RightIcon>
    <Share2 />
  </Button.RightIcon>
</Button>

<Button variant="secondary">
  <Button.LeftIcon>
    <Send />
  </Button.LeftIcon>
</Button>

{/* Tertiary variant with icons */}
<HStack space="$4" alignItems="center">
  <Button.LeftIcon>
    <Map />
  </Button.LeftIcon>
  View on map
</Button>

<Button variant="tertiary">
  See all
  <Button.RightIcon>
    <ArrowRight />
  </Button.RightIcon>
</Button>

<Button variant="tertiary">
  <Button.LeftIcon>
    <Check />
  </Button.LeftIcon>
</Button>

Destructive

If you want to warn your users about a dangerous action, like closing the account or removing information, you can use the destructive flag like this:

Delete account

Cancel subscription

Sign out

<Button destructive>
  <Button.LeftIcon>
    <Trash2 />
  </Button.LeftIcon>
  Delete account
</Button>

<Button variant="secondary" destructive>
  <Button.LeftIcon>
    <Ban />
  </Button.LeftIcon>
  Cancel subscription
</Button>

<Button variant="tertiary" destructive>
  <Button.LeftIcon>
    <LogOut />
  </Button.LeftIcon>
  Sign out
</Button>

Disabled

You can use the isDisabled flag to dinamically disable your button.

Submit form

Edit profile

Reset password

<Button isDisabled>Submit form</Button>

<Button variant="secondary" isDisabled>
  Edit profile
</Button>

<Button variant="tertiary" isDisabled>
  Reset password
</Button>

Long Text

In case you are adding a very long text on your button, this component will only show 2 lines, adding an ellipsis at the end.

Accept terms and conditions to continue with your purchase

Review your order details before completing the checkout process

Contact our support team for assistance with your account

<Button flex={1}>
  Accept terms and conditions to continue with your purchase
</Button>

<Button variant="secondary" flex={1}>
  Review your order details before completing the checkout process
</Button>

<Button variant="tertiary" flex={1}>
  Contact our support team for assistance with your account
</Button>

Custom Background and Text Color

You can also customize the background color, text color, and pressed/hover background color to fully customize your button component

Book appointment

View schedule

Cancel booking

<Button
  backgroundColor="#582C4D"
  textColor="#D5B9B2"
  borderColor={"#582C4D"}
  pressStyle={{
    backgroundColor: "#360A2B",
    borderColor: "#360A2B",
  }}
  hoverStyle={{
    backgroundColor: "#360A2B",
    borderColor: "#360A2B",
  }}
>
  Book appointment
</Button>

<Button
  textColor="#582C4D"
  borderColor={"#582C4D"}
  variant="secondary"
  pressStyle={{
    backgroundColor: "#360A2B",
    borderColor: "#360A2B",
  }}
  hoverStyle={{
    backgroundColor: "#360A2B",
    borderColor: "#360A2B",
  }}
>
  View schedule
</Button>

<Button
  backgroundColor="#582C4D"
  textColor="#582C4D"
  borderColor={"#582C4D"}
  variant="tertiary"
>
  Cancel booking
</Button>

Overriding Global Color Mode

You can optionally override the color mode for this specific component. You can choose between light and dark.

By default, the component will use the globally active color mode.

Upgrade plan

Compare plans

View pricing

<Button colorMode="dark" variant="primary">
  Upgrade plan
</Button>

<Button colorMode="dark" variant="secondary">
  Compare plans
</Button>

<Button colorMode="dark" variant="tertiary">
  View pricing
</Button>

Overriding Accent Color

You can optionally override the accent color for this specific component. You can choose between these colors.

By default, the component will use the globally active accent color, defined by the theme.

Complete purchase

Add to wishlist

Continue shopping

<Button variant="primary" accentColor="emerald">
  Complete purchase
</Button>

<Button variant="secondary" accentColor="emerald">
  Add to wishlist
</Button>

<Button variant="tertiary" accentColor="emerald">
  Continue shopping
</Button>

Override Global Color Mode and Accent Color

Join waitlist

Notify me

Remind later

<Button accentColor="emerald" colorMode="dark" variant="primary">
  Join waitlist
</Button>

<Button accentColor="emerald" colorMode="dark" variant="secondary">
  Notify me
</Button>

<Button accentColor="emerald" colorMode="dark" variant="tertiary">
  Remind later
</Button>

No border radius

A button component without border radius

Apply filters

Clear all

Reset defaults

<Button borderRadius={"$0"} onPress={() => console.log("Button tapped")}>
  Apply filters
</Button>

Press events (onPressIn/onPressOut)

State: idle | Press count: 0

Save changes

Send message

Next step

const [pressState, setPressState] = useState<string>("idle");
const [pressCount, setPressCount] = useState<number>(0);

<Button
  onPress={() => setPressCount((prev) => prev + 1)}
  onPressIn={() => setPressState("pressed")}
  onPressOut={() => setPressState("released")}
>
  Save changes
</Button>

<Button
  onPress={() => setPressCount((prev) => prev + 1)}
  onPressIn={() => setPressState("pressed")}
  onPressOut={() => setPressState("released")}
>
  <Button.LeftIcon>
    <Send />
  </Button.LeftIcon>
  Send message
</Button>

<Button
  onPress={() => setPressCount((prev) => prev + 1)}
  onPressIn={() => setPressState("pressed")}
  onPressOut={() => setPressState("released")}
>
  Next step
  <Button.RightIcon>
    <ArrowRight />
  </Button.RightIcon>
</Button>

<Button
  onPress={() => setPressCount((prev) => prev + 1)}
  onPressIn={() => setPressState("pressed")}
  onPressOut={() => setPressState("released")}
>
  <Button.LeftIcon>
    <Heart />
  </Button.LeftIcon>
</Button>

Basic​

Sizes​

Variants​

With Icons​

Destructive​

Disabled​

Long Text​

Custom Background and Text Color​

Overriding Global Color Mode​

Overriding Accent Color​

Override Global Color Mode and Accent Color​

No border radius​

Press events (onPressIn/onPressOut)​