Button
The Button component allows users to initiate actions or submit forms with a single click
Use the LinkButton component instead when you need navigation functionality with a button-like appearance.
Installation
npm install --save @godaddy/antaresProps
The Button component accepts the following props:
variant?"critical" | "primary" | "secondary" | "tertiary" | "inline" | "minimal" | null | undefined—The variant of the button.
size?"sm" | "md" | null | undefined—The size of the button.
className?string | undefined—Additional class names to apply to the button.
children?React.ReactNode—The content of the button.
value?string | undefined—The value associated with the button's name when it's submitted with the form data.
style?StyleOrFunction<ButtonRenderProps> | undefined—The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
render?DOMRenderFunction<"button", ButtonRenderProps> | undefined—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot?string | null | undefined—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
form?string | undefined—The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form).
isDisabled?boolean | undefined—Whether the button is disabled.
type?"button" | "submit" | "reset" | undefined'button'The behavior of the button when used in an HTML form.
preventFocusOnPress?boolean | undefined—Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
formAction?string | ((formData: FormData) => void | Promise<void>) | undefined—The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
formEncType?string | undefined—Indicates how to encode the form data that is submitted.
formMethod?string | undefined—Indicates the HTTP method used to submit the form.
formNoValidate?boolean | undefined—Indicates that the form is not to be validated when it is submitted.
formTarget?string | undefined—Overrides the target attribute of the button's form owner.
name?string | undefined—Submitted as a pair with the button's value as part of the form data.
The LinkButton component accepts the following props:
isExternal?boolean | undefined—Whether the link is external. It will show an external icon if true.
variant?"critical" | "primary" | "secondary" | "tertiary" | "inline" | "minimal" | null | undefined—The variant of the button.
size?"sm" | "md" | null | undefined—The size of the button.
className?string | undefined—Additional class names to apply to the button.
children?React.ReactNode—The content of the button.
style?StyleOrFunction<LinkRenderProps> | undefined—The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
render?((props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | React.DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement>, renderProps: LinkRenderProps) => React.ReactElement) | undefined—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element. Requirements: - You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot?string | null | undefined—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
isDisabled?boolean | undefined—Whether the link is disabled.
Examples
Basic Usage
The default/tertiary button is the base for all other buttons in the system. It provides no significant visual treatment other than to provide indication for the user to take a common action.
import { Button } from '@godaddy/antares';export function DefaultExample() { return <Button>Click me!</Button>;}Primary
The primary button should be used to indicate the most important action for the user to take in their current experience.
import { Button, type ButtonProps } from '@godaddy/antares';export function PrimaryExample(props: ButtonProps) { return ( <Button {...props} variant="primary"> Primary Button </Button> );}Secondary
The secondary button indicates an action of secondary importance.
import { Button } from '@godaddy/antares';export function SecondaryExample() { return <Button variant="secondary">Secondary Button</Button>;}Critical
The critical button signifies to the user a destructive action will take place.
import { Button } from '@godaddy/antares';export function CriticalExample() { return <Button variant="critical">Critical Button</Button>;}Inline
import { Button, Text } from '@godaddy/antares';export function InlineExample() { return ( <Text> I am an <Button variant="inline">inline button</Button> surrounded by text! </Text> );}Minimal
The minimal button is an icon-only button that's used when space is limited and/or when the action is universally understood.
Button Size | Gap Size | Example | Usage |
|---|---|---|---|
md | md | Recommended | |
md | sm | Can be used, but not recommended. | |
sm | md | Not recommended. The button may not be accessible at this size. | |
sm | sm | Not recommended. The button may not be accessible at this size. |
import { Button, Flex, Icon } from '@godaddy/antares';export function MinimalExample() { return ( <table className="button-story-table"> <thead> <tr> <th scope="col"> <Flex blockPadding="md" inlinePadding="md" gap="md"> Button Size </Flex> </th> <th scope="col"> <Flex blockPadding="md" inlinePadding="md" gap="md"> Gap Size </Flex> </th> <th scope="col"> <Flex blockPadding="md" inlinePadding="md" gap="md"> Example </Flex> </th> <th scope="col"> <Flex blockPadding="md" inlinePadding="md" gap="md"> Usage </Flex> </th> </tr> </thead> <tbody> <tr> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>md</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>md</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <Button variant="minimal" size="md" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="minimal" size="md" aria-label="Edit"> <Icon icon="edit" /> </Button> <Button variant="minimal" size="md" aria-label="More options" isDisabled> <Icon icon="ellipsis" /> </Button> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> Recommended </Flex> </td> </tr> <tr> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>md</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>sm</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="sm"> <Button variant="minimal" size="md" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="minimal" size="md" aria-label="Edit"> <Icon icon="edit" /> </Button> <Button variant="minimal" size="md" aria-label="More options" isDisabled> <Icon icon="ellipsis" /> </Button> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> Can be used, but not recommended. </Flex> </td> </tr> <tr> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>sm</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>md</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <Button variant="minimal" size="sm" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="minimal" size="sm" aria-label="Edit"> <Icon icon="edit" /> </Button> <Button variant="minimal" size="sm" aria-label="More options" isDisabled> <Icon icon="ellipsis" /> </Button> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> Not recommended. The button may not be accessible at this size. </Flex> </td> </tr> <tr> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>sm</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> <code>sm</code> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="sm"> <Button variant="minimal" size="sm" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="minimal" size="sm" aria-label="Edit"> <Icon icon="edit" /> </Button> <Button variant="minimal" size="sm" aria-label="More options" isDisabled> <Icon icon="ellipsis" /> </Button> </Flex> </td> <td> <Flex blockPadding="md" inlinePadding="md" gap="md"> Not recommended. The button may not be accessible at this size. </Flex> </td> </tr> </tbody> </table> );}Icon
You may provide an optional Icon element to the button. If you do not include text, you must provide an aria-label attribute to identify the purpose of the button. This will produce a square button.
import { Button, Flex, Icon, LinkButton, Text } from '@godaddy/antares';export function IconExample() { return ( <Flex direction="column" gap="md"> <div> <Button variant="primary"> <Icon icon="star" /> <Text>With an icon!</Text> </Button> </div> <div> <LinkButton variant="secondary" href="#" isExternal> <Text>An external link!</Text> </LinkButton> </div> <Flex alignItems="center" gap="sm"> <Text>Icon only button:</Text> <Button variant="primary" aria-label="Star"> <Icon icon="star" /> </Button> </Flex> <div> <Text> Hey look at me!{' '} <LinkButton href="#" variant="inline" isExternal> link button </LinkButton>{' '} I have an icon! </Text> </div> </Flex> );}Sizes
import { Button, Flex, Icon, LinkButton, Text } from '@godaddy/antares';export function SizesExample() { return ( <Flex alignItems="center" gap="sm" wrap="wrap"> <Button variant="primary" size="sm" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="primary" size="sm"> Small </Button> <LinkButton href="#" variant="primary" size="sm" aria-label="Star"> <Icon icon="star" /> <Text>Link Small</Text> </LinkButton> <Button variant="primary" aria-label="Star"> <Icon icon="star" /> </Button> <Button variant="primary">Medium</Button> <LinkButton href="#" variant="primary"> <Icon icon="star" /> <Text>Link Medium</Text> </LinkButton> </Flex> );}Disabled
import { Button, Flex, LinkButton } from '@godaddy/antares';export function DisabledExample() { return ( <Flex alignItems="center" gap="md" wrap="wrap"> <Button variant="primary" isDisabled> Primary Disabled </Button> <Button variant="secondary" isDisabled> Secondary Disabled </Button> <Button variant="tertiary" isDisabled> Tertiary Disabled </Button> <Button variant="critical" isDisabled> Critical Disabled </Button> <Button variant="inline" isDisabled> Inline Disabled </Button> <LinkButton variant="secondary" href="#" isDisabled> Link Disabled </LinkButton> </Flex> );}Alert
In-page alerts are non-intrusive notifications within a webpage, providing users with timely information or feedback without disrupting their experience.
Carousel
The Carousel component allows users to cycle through a series of content panels (typically images, cards, or text) in a horizontal or vertical layout. It is commonly used for featured content, product showcases, or testimonials.