Button

Button is the main way to trigger an action. The variants primary, secondary, tertiary and destructive are the Figma Button types; inverse is the dark button and link is an inline text action.

import { Button } from '@beyul/sulmu-ui'

Source · Figma

Examples

Variants

import { Button, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="inverse">Inverse</Button>
      <Button variant="link">Link</Button>
    </Flex>
  )
}

Sizes

import { Button, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <Button size="sm">Small, 40px</Button>
      <Button size="md">Medium, 44px</Button>
      <Button size="lg">Large, 52px</Button>
    </Flex>
  )
}

With icons

Pass an icon component to leftIcon or rightIcon. Icons are 16px by default.

import { AddIcon, ArrowRightIcon, Button, Edit2Icon, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <Button leftIcon={<AddIcon />}>Add client</Button>
      <Button variant="secondary" rightIcon={<ArrowRightIcon />}>
        View more
      </Button>
      <Button variant="tertiary" leftIcon={<Edit2Icon />}>
        Edit
      </Button>
    </Flex>
  )
}

Loading and disabled

loading shows a spinner in place of the left icon, disables the button and sets aria-busy.

import { Button, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <Button loading>Saving</Button>
      <Button variant="secondary" loading>
        Saving
      </Button>
      <Button disabled>Disabled</Button>
      <Button variant="secondary" disabled>
        Disabled
      </Button>
    </Flex>
  )
}

Full width

import { Button, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack gap={3} style={{ maxWidth: 320 }}>
      <Button fullWidth>Log In</Button>
      <Button variant="secondary" fullWidth>
        Create account
      </Button>
    </Stack>
  )
}

As a link

asChild renders the child element with the button’s styles. Use it for an <a> or a router link.

Open accounts

import { Button } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Button variant="secondary" asChild>
      <a href="#accounts">Open accounts</a>
    </Button>
  )
}

Props

Prop	Type	Default	Description
`variant`	`"link" \| "primary" \| "secondary" \| "tertiary" \| "destructive" \| "inverse"`	`primary`	Visual style. Default: primary. primary, secondary, tertiary and destructive are the Figma Button types; `inverse` is the dark button; `link` is an inline text action.
`size`	`"sm" \| "md" \| "lg"`	`md`	sm 40px, md 44px, lg 52px. Default: md.
`leftIcon`	`ReactNode`	-	Icon before the label. Pass an icon component, e.g. `<Edit2Icon />`.
`rightIcon`	`ReactNode`	-	Icon after the label.
`loading`	`boolean`	-	Shows a spinner before the label, disables the button and marks it busy.
`fullWidth`	`boolean`	-	Stretch to the width of the container.
`disabled`	`boolean`	-
`asChild`	`boolean`	-	Use the provided child element as the default rendered element, combining their props and behavior.

Button also accepts every button attribute (onClick, type, form, aria-* and so on).

Accessibility and usage

The default type is "button", so a Button inside a form does not submit it. Set type="submit" on the submit button.
With asChild, only the child is rendered: leftIcon, rightIcon and the loading spinner are not added, and type is not set.
A page should have one primary action. Use secondary or tertiary for the others, and destructive for actions that delete.
For a button with only an icon, use Icon Button: it requires an aria-label.