Snippet code
A code snippet block is a read-only panel that shows source as source: a monospaced body with syntax colour, the filename in the chrome above it, line numbers down the gutter and a copy button that puts the whole thing on the clipboard.
Get Pro to installPro4 blocksReact, Vue and Figma
SaveBar.tsx
import { SkeuomorphicButton } from '@orvain/react';
type SaveBarProps = { onSave: () => void };
type SaveBarProps = { dirty: boolean; onSave: () => void };
export function SaveBar({ onSave }: SaveBarProps) {
export function SaveBar({ dirty, onSave }: SaveBarProps) {
return (
<SkeuomorphicButton variant="secondary" size="md" onClick={onSave}>
<SkeuomorphicButton variant="primary" intent="brand" size="md" pill disabled={!dirty} onClick={onSave}>
Save changes
</SkeuomorphicButton>
);
}
Reply
Resolve
More actions
Brand intent on the primary action only. Cancel and Reset stay neutral, so keep intent="brand" here.
Agreed. @Mia I'll leave Cancel on the default.
Every block in the set#
When to use#
- Documentation whose next step is the reader pasting the code into their own file.
- A changelog showing exactly what a migration changes.
- An install command on a landing page, where the command is the proof.
- Support answers that hand over a config file the reader has to keep intact.
The whole set, with its codePro
Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.