Files
supabase/apps/design-system/registry/default/example/admonition-button.tsx
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00

25 lines
853 B
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { Button } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
export default function AdmonitionDemo() {
return (
<div className="flex flex-col gap-4">
<Admonition
type="warning"
layout="horizontal"
title="Set up custom SMTP"
description="You’re using the built-in email service. This service has rate limits and is not meant to be
used for production apps."
actions={<Button variant="default">Set up SMTP</Button>}
/>
<Admonition
type="destructive"
layout="horizontal"
title="Deleting this organization will also remove its projects"
description="Make sure you have made a backup of your projects if you want to keep your data."
actions={<Button variant="danger">Delete organization</Button>}
/>
</div>
)
}