UnstyledButton
Renders a <button> (or any element) with all default browser styles removed. Use it as a base for building custom interactive controls when you need full style ownership.
Default
<UnstyledButton>Click me — no browser styles</UnstyledButton>With custom styles
<UnstyledButton
style="padding:8px 16px;background:blue;color:white;border-radius:4px"
>
Custom styled
</UnstyledButton>As a link
<UnstyledButton component="a" href="/page">
Looks like a link
</UnstyledButton>As a card tile
<UnstyledButton
style="padding:16px;background:white;border:1px solid #eee;border-radius:8px;cursor:pointer"
>
<div>Card title</div>
<div>Description text</div>
</UnstyledButton>Submit type
<UnstyledButton type="submit">Submit form</UnstyledButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
component | string | 'button' | HTML element to render as root |
disabled | boolean | — | Disables the button when rendering as a native button |
type | 'button'|'submit'|'reset' | 'button' | HTML button type; only applied for native button element |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Content inside the button |