Snippet
Display a snippet of copyable code for the command line.
General
Basic Usage
Width
Specify width manually.
Types
Show different states with colors.
Rounded
You can completely round the corners of any type of Snippet with the rounded property.
Multi Line
You can use multi line of the Snippet with the array in text prop.
Without Copy
Hide icon for copy. (disable copy)
Custom Symbol
You can custom symbol of the Snippet with the property symbol.
Custom Toast
You can custom toast of the Snippet with the property toastText and toastType.
Filled
Show different states filled with colors.
APIs
Snippet.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| text | code snippet | string string[] | - | - |
| type | snippet types | SnippetTypes | SnippetTypes | default |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| width | set CSS string | string | - | initial |
| copy | function of copy button | CopyTypes | CopyTypes | default |
| symbol | symbol snippet | string | - | $ |
| toastText | toast text | string | - | Copied to clipboard! |
| toastType | toast type | ToastTypes | ToastTypes | success |
| ... | native props | HTMLAttributes | 'id', 'name', 'className', ... | - |
SnippetTypes
type SnippetTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
CopyTypes
type CopyTypes = 'default' | 'silent' | 'prevent'
ToastTypes
type ToastTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'