Button

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button appearance="filled">Filled</Button>
      <Button appearance="stroke">Stroke</Button>
      <Button appearance="lighter">Lighter</Button>
      <Button appearance="ghost">Ghost</Button>
    </>
  )
}

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button color="primary">Primary</Button>
      <Button color="neutral">Neutral</Button>
      <Button color="error">Error</Button>
      <Button color="success">Success</Button>
    </>
  )
}

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button size="md">Medium</Button>
      <Button size="sm">Small</Button>
      <Button size="xs">X-Small</Button>
      <Button size="2xs">2X-Small</Button>
    </>
  )
}

import { Button, Icon } from "@nili/ui"
import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <Button
      startIcon={<Icon icon={RiArrowLeftSLine} mirrored />}
      endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
    >
      Continue
    </Button>
  )
}

import { Button, Icon } from "@nili/ui"
import { RiAddLine } from "@remixicon/react"

export function Example() {
  return (
    <Button iconOnly aria-label="Add" startIcon={<Icon icon={RiAddLine} />} />
  )
}

import { Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Button loading loadingLabel="Sending">Send</Button>
      <Button disabled>Disabled</Button>
    </>
  )
}

import { Button } from "@nili/ui"

export function Example() {
  return <Button fullWidth>Continue</Button>
}

import { LinkButton, Icon } from "@nili/ui"
import { RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <LinkButton href="#" color="primary">Primary link</LinkButton>
      <LinkButton href="#" color="gray">Gray link</LinkButton>
      <LinkButton href="#" color="error" underline>
        Underlined
      </LinkButton>
      <LinkButton
        href="#"
        color="primary"
        endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
      >
        With icon
      </LinkButton>
    </>
  )
}

import { FancyButton, Icon } from "@nili/ui"
import { RiArrowRightSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <FancyButton color="primary">Primary</FancyButton>
      <FancyButton color="neutral">Neutral</FancyButton>
      <FancyButton color="basic">Basic</FancyButton>
      <FancyButton
        color="primary"
        endIcon={<Icon icon={RiArrowRightSLine} mirrored />}
      >
        Continue
      </FancyButton>
    </>
  )
}

import { CompactButton, Icon } from "@nili/ui"
import { RiCloseLine, RiSettings3Line, RiMore2Fill } from "@remixicon/react"

export function Example() {
  return (
    <>
      <CompactButton appearance="stroke" aria-label="Close">
        <Icon icon={RiCloseLine} />
      </CompactButton>
      <CompactButton appearance="ghost" aria-label="Settings">
        <Icon icon={RiSettings3Line} />
      </CompactButton>
      <CompactButton appearance="error" aria-label="Delete">
        <Icon icon={RiCloseLine} />
      </CompactButton>
    </>
  )
}