Button

Displays a button. 

<Button variant="default">Click Me</Button>

Installation

uvx --from basic-components components add button
pipx run --spec basic-components components add button
pip install basic-components && components add button
  • Copy Button components below to your local environment
  • Place them in the components/ui/button directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Button variant="default">Click Me</Button>

Attributes

Name Type Default Description
className String Additional tailwind classes to apply to the component.
variant String "default" Sets the button style. Available: default, outline, ghost, etc.
size String "default" Size of the button: sm, lg, icon.
disabled Boolean False Disables the button if True.

Code

{#def
    className: str = "",
    variant: str = "default",
    size: str = "default",
    disabled: bool = False
#}
{% set baseclassName = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300" %}
{% set variantclassName = {
    'default': 'bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90',
    'destructive': 'bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90',
    'outline': 'border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
    'secondary': 'bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80',
    'ghost': 'hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
    'link': 'text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50'
  }[variant] %}
{% set sizeclassName = {
    'default': 'h-10 px-4 py-2',
    'sm': 'h-9 rounded-md px-3',
    'lg': 'h-11 rounded-md px-8',
    'icon': 'h-10 w-10'
  }[size] %}
<button
    class="{{ baseclassName }} {{ variantclassName }} {{ sizeclassName }} {{ className }}"
    {% if disabled %}disabled{% endif %}
    {{ attrs.render() }}
>
  {{ content }}
</button>

Examples

Destructive

<Button variant="destructive">Destructive</Button>

Outline

<Button variant="outline">Outline</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Ghost

<Button variant="ghost">Ghost</Button>

<Button variant="link">Link</Button>