#Icons

Leaf UI uses Lucide icons. Install lucide-react when importing icons in your application:

pnpm add lucide-react

#Using icons

Button accepts startIcon and endIcon; Input accepts prefix and suffix. Import only the icons you need. Icons inherit the current text color.

import { Button } from '@sudden3/leaf-ui';
import { ArrowRight, Plus, Trash2 } from 'lucide-react';

export function ButtonIcons() {
  return (
    <>
      <Button startIcon={<Plus />}>New project</Button>
      <Button variant="outline" endIcon={<ArrowRight />}>
        Continue
      </Button>
      <Button variant="soft" aria-label="Add project" startIcon={<Plus />} />
      <Button danger variant="outline" aria-label="Delete project" startIcon={<Trash2 />} />
    </>
  );
}

#Accessible names

Text supplies the name of a text button. Supply aria-label for icon-only buttons. Icons are decorative and should not be the only indication of an action. Icon properties accept ReactNode, so you can use your existing React icon components too.