button.mdx

import Image from "next/image"; import { Callout } from "nextra/components"; import { Button, Stack } from "@chepe/ui";

import ComponentShowcase from "./../../components/ComponentShowcase/ComponentShowcase"; import ComponentContainer from "./../../components/ComponentContainer/ComponentContainer";

import ButtonA11Y from "./../../shared/button-a11y.mdx"; import ButtonGuidelines from "./../../shared/button-guidelines.mdx";

Work in Progress

Button

{/* Section: Links */}

[](https://www.figma.com/file/VgZTsIrH0uIGxTgAHFmlja/DLS-Tokens-(Demo)?type=design&node-id=400%3A5232&t=WHk0gga6VhOrKVEk-1)

[](https://github.com/chepetime/react-design-system/tree/main/packages/ui/src/components/Button)

[](https://main--640570a127fec98c46084e16.chromatic.com/?path=/docs/components-button--docs)

{/* Section: General Description */} Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.

{/* Section: Live Example with Code */}

<ComponentShowcase component={Hello world!} seed={0}>

```tsx filename="app.tsx" {1,4} copy
  import { Button } from "@chepe/ui";

  export default function App() {
    return <Button>Hello world!</Button>;
  }
```

{/* Section: Features */}

Features

• ✅ Focus is fully managed.
• ✅ Full keyboard navigation.

{/* Section: Anatomy */}

Anatomy

Roles

User Interactive, Focusable, Disableable, Hoverable

Layout

Only use one primary button in a layout for the most important action. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds.

When there are many available minor actions, use the outline, subtle, or transparent appearances on all buttons to avoid a busy layout.

<Image src="https://placehold.co/600x400" alt="Demo" width={600} height={400} style={{ margin: "2rem auto" }} />

Always give the primary button action prominent placement, either on top of or to the left of other actions. In right-to-left languages, primary button placement will be on the right

Elements

<Image src="https://placehold.co/600x400" alt="Demo" width={600} height={400} style={{ margin: "2rem auto" }} />

1. Label text
2. Container
3. Icon (optional)

Types

Buttons have three different types:

• Variant
• Color
• Size

Variants

Normal Ghost Text Link

import { Button } from "@chepe/ui";

export default function App() {
  return (
    <Stack horizontal>
      <Button>Normal</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="text">Text</Button>
      <Button variant="link">Link</Button>
    </Stack>
  );
}

Colors

default secondary success warning error info

import { Button } from "@chepe/ui";

export default function App() {
  return (
    <Stack horizontal>
      <Button color="default">default</Button>
      <Button color="secondary">secondary</Button>
      <Button color="success">success</Button>
      <Button color="warning">warning</Button>
      <Button color="error">error</Button>
      <Button color="info">info</Button>
    </Stack>
  );
}

Sizes

Small Medium Large

import { Button, div } from "@chepe/ui";

export default function App() {
  return (
    <Stack horizontal>
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>
    </Stack>
  );
}

API Reference

interface ButtonProps

Prop	Default	Options
block	false	boolean
variant	normal	"normal", "ghost", "text", "link"
color	primary	"default", "primary", "secondary", "warning", "warning", "error", "info"
size	medium	"small", "medium", "large"
onClick	void	callback function
onKeyDown	void	callback function
onKeyPress	void	callback function
onKeyUp	void	callback function

Behaviors

States: For each button action type and emphasis style there are five button states — enabled, hover, active, focus and disabled.

<Image src="https://placehold.co/600x400" alt="Demo" width={600} height={400} style={{ margin: "2rem auto" }} />

Related Content

Appears on Patterns

<Image src="https://placehold.co/300x200" alt="Demo" width={300} height={200} style={{ margin: "2rem 0" }} />

Menu button A menu button shows a menu of options. Unlike the split button, the menu button does not surface a primary action. It is often styled as a typical button with a downward pointing arrow or triangle to hint that activating the button will display a menu.

<Image src="https://placehold.co/300x200" alt="Demo" width={300} height={200} style={{ margin: "2rem 0" }} />

Toggle button A toggle button is a two-state behavior that switches a state between on and off. A button’s rest state indicates “off” while the selected state indicates “on.” The button and compound button types can have toggle behavior.

Related Components

• Button Group
• Link
• Form Elements