A short message that points out a feature people might miss, inside the page or anchored to a control, as TipKit tips do.

import { Tip } from "@plexui/ui/components/Tip";

A tip teaches a feature people might not find on their own: a title that names it and a sentence or two on how to use it. Show one tip at a time, close to what it explains, and stop showing it once the feature is used or the tip is closed. A tip is not for errors or for news about a task: use an Alert or a Toast. It follows the TipKit kit, the macOS Mini Tip on a desktop and on a phone the shape TipKit's tip and most of Apple's own cards share, on the card of a grouped list or, for a popover tip, in the iOS 27 alert's glass. Apple's apps also draw cards of their own, with a large image, a centered layout or capsule buttons; build those from a Card and Buttons.

Examples

Overview

Save it for later

Bookmarked articles wait in your reading list, ready offline on every device.

Actions

Turn on notifications

Get a message when someone replies to your post or mentions you.

Buttons on a phone

Get alerts

Hear about severe weather where you are, even when the app is closed.

Arrow

Filter the list

Show only the items from the last week, month or year.

API

Tip

Prop	Type	Default	Description
`title`	`ReactNode`	—	The tip's title: what the feature is
`description`	`ReactNode`	—	One or two sentences on how to use it
`icon`	`ReactNode`	—	A symbol or image that leads the message
`actions`	`ReactNode`	—	Buttons for the tip's actions, side by side below the message
`mobileActions`	`"rows" \| "buttons"`	`"rows"`	How the actions show at 767px and below: rows of text under a separator, or the buttons as given, each a full-width capsule
`onClose`	`() => void`	—	Shows the Close button; called when it is clicked
`arrowEdge`	`"top" \| "bottom" \| "left" \| "right"`	—	Draws an arrow at this edge, pointing at what the tip explains
`className`	`string`	—	CSS classes applied to the tip
`ref`	`Ref<HTMLDivElement>`	—	Ref applied to the tip

Tip.Popover

Takes title, description, icon, actions and mobileActions as Tip does, and the control it explains as its only child.

Prop	Type	Default	Description
`open`	`boolean`	—	Shows the tip (controlled)
`defaultOpen`	`boolean`	`false`	Shows the tip at first (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Called when the tip opens or closes
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	The side of the control the tip shows on, turned when it does not fit
`align`	`"start" \| "center" \| "end"`	`"center"`	The alignment against the control
`sideOffset`	`number`	`4`	The distance from the control to the arrow's point, in pixels
`closeButton`	`boolean`	`true`	Shows the Close button
`className`	`string`	—	CSS classes applied to the popover around the tip and its arrow

An inline tip is a note named by its title. A popover tip is a non-modal dialog named by its title and described by its description; it does not move the focus, so the control it explains keeps it, and it stays open while the focus moves. Tab moves from the control into the tip and from the tip on to what follows the control. Close is a button named Close tip.

Styling

Tip reads these component tokens. Override them at any scope to restyle it; at 767px and below the tip sets its padding, gap and Close tokens on itself, so override those on the tip:

--tip-radius: the corners (default 20px; 26px at 767px and below)
--tip-padding-top, --tip-padding-inline, --tip-padding-bottom: the padding (default 22px, 16px, 16px; at 767px and below 14px, the layout margin, 0px, as the action rows reach the bottom edge, or 16px under action buttons; the top value below as well without actions)
--tip-gap: space between the message and the actions (default 22px; 11px at 767px and below, 16px above action buttons)
--tip-title-font-size, --tip-title-line-height: the title (default 17px, 22px, semibold)
--tip-description-font-size, --tip-description-line-height, --tip-description-gap: the description and its space under the title (default 15px, 20px, 4px; no space at 767px and below)
--tip-description-color: the description and the symbol (default var(--color-text-secondary))
--tip-action-gap: space between actions (default 12px)
--tip-icon-size, --tip-icon-frame-width, --tip-icon-frame-height: the symbol and its frame (default 40px, 44px, 54px; a 36px tile at 767px and below)
--tip-close-size, --tip-close-offset, --tip-close-icon-size: Close and its distance from the corner (default 30px, 19px, 20px; a bare 22px glyph 17px from the trailing edge at 767px and below)
--tip-arrow-width, --tip-arrow-height: the arrow (default 47px, 13px)
--tip-background: an inline tip (default var(--alpha-05); the grouped cell, --mobile-surface-grouped-secondary, at 767px and below)
--tip-popover-width, --tip-popover-background, --tip-popover-shadow: a popover tip (default 300px, var(--color-surface-elevated), 0 10px 30px rgb(0 0 0 / 20%); the alert's glass at 767px and below)

Tip

On this page