Button

The plain pill button: every shadcn variant on the ChatGPT-style size scale, with a light press response.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonBasic } from '@/components/component-kit/items/button-basic';
2
3export function Example() {
4  return (
5    <div className="flex items-center gap-2">
6      <ButtonBasic>Get started</ButtonBasic>
7      <ButtonBasic variant="outline">Log in</ButtonBasic>
8    </div>
9  );
10}

Props

Button properties
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Apply the button to a child link while preserving its navigation semantics.
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`default`	Any shadcn button variant.
`size`	`"sm" \| "default" \| "lg" \| "icon" \| "icon-lg"`	`default`	Pill height: 28, 32 or 36px, or a 32/36px circle for icons.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonBasic } from '@/components/component-kit/items/button-basic';
2
3export function Example() {
4  return (
5    <div className="flex items-center gap-2">
6      <ButtonBasic>Get started</ButtonBasic>
7      <ButtonBasic variant="outline">Log in</ButtonBasic>
8    </div>
9  );
10}

Props

Button properties
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Apply the button to a child link while preserving its navigation semantics.
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`default`	Any shadcn button variant.
`size`	`"sm" \| "default" \| "lg" \| "icon" \| "icon-lg"`	`default`	Pill height: 28, 32 or 36px, or a 32/36px circle for icons.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonBasic } from '@/components/component-kit/items/button-basic';
2
3export function Example() {
4  return (
5    <div className="flex items-center gap-2">
6      <ButtonBasic>Get started</ButtonBasic>
7      <ButtonBasic variant="outline">Log in</ButtonBasic>
8    </div>
9  );
10}

Props

Button properties
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Apply the button to a child link while preserving its navigation semantics.
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`default`	Any shadcn button variant.
`size`	`"sm" \| "default" \| "lg" \| "icon" \| "icon-lg"`	`default`	Pill height: 28, 32 or 36px, or a 32/36px circle for icons.

Button

The plain pill button: every shadcn variant on the ChatGPT-style size scale, with a light press response.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonBasic } from '@/components/component-kit/items/button-basic';
2
3export function Example() {
4  return (
5    <div className="flex items-center gap-2">
6      <ButtonBasic>Get started</ButtonBasic>
7      <ButtonBasic variant="outline">Log in</ButtonBasic>
8    </div>
9  );
10}

Props

Button properties
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Apply the button to a child link while preserving its navigation semantics.
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`default`	Any shadcn button variant.
`size`	`"sm" \| "default" \| "lg" \| "icon" \| "icon-lg"`	`default`	Pill height: 28, 32 or 36px, or a 32/36px circle for icons.