InlineTip

A short callout with a colored accent for a tip, warning, error, or success.

When to use

Use InlineTip when you need a short callout with a colored accent for a tip, warning, error, or success.

Import

TypeScript

import { InlineTip } from '@gzodo/ui'

Use InlineTip inside a form or a settings panel when one sentence of guidance should stay on the page. It is not a toast. variant sets the accent color and the default label. Pass label to replace that word. footer is an optional action row.

Examples

Tip: Use tokens for theming instead of hard-coded colors.

Tip

The default variant. The label is “Tip” and the accent uses the muted text color.

Warning: This action may overwrite local changes.

Error: The workspace could not be reached.

Success: Workspace created.

Warning, error, success

Each variant changes the accent. The default labels are Warning, Error, and Success.

Done: The import finished with no conflicts.

Custom label

label replaces the bold prefix. The colon is added for you.

Warning: Three files will be overwritten.

Footer

footer sits under the sentence. Use it for a follow-up action, not for a second paragraph.

InlineTip

Property

Description

Type

Default

children

The sentence after the label.

ReactNode

—

variant

Accent color and the default label.

'tip' | 'warning' | 'error' | 'success'

'tip'

label

Bold prefix. Defaults from the variant.

string

—

footer

Action row under the content.

ReactNode

—

className

Class on the root.

string

—

IconStatus

Skeleton