Callout

Callouts are snippets of information, drawing attention to important content.

Native only!

For the web implementation of a "callout", see Components - Attention - Callout.

React

unsupported

Vue

unsupported

Elements

unsupported

Android

released

iOS

released

Example

Example theme:

DBA lightFinn lightTori light

Usage

Design Guidelines

See Figma: Warp - Components / Callout

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Syntax

func Warp.Callout(
            size: Warp.CalloutSize,
            type: Warp.CalloutType,
            title: String,
            arrowEdge: Edge
        )

Warp.Callout(title: "This is a Callout")

There are a variety of variants and positions supported for the Callout component:

public enum CalloutSize {
    case small
    case `default`
}

public enum CalloutType {
    case inline
    case popover(onTapped: () -> Void)
}

public enum Edge {
    case top
    case leading
    case bottom
    case trailing
}

Legacy support

Coming soon

Parameters

Required props

name	type	default	notes
size	Warp.CalloutSize.default Warp.CalloutSize.small	Warp.CalloutSize.default	The size of the Callout
type	Warp.CalloutType.inline Warp.CalloutType.popover	Warp.CalloutType.inline	The type of the Callout, popover accepts a onClose action
title	String		The text to be displayed
arrowEdge	Edge.top Edge.leading Edge.bottom Edge.trailing	Edge.top	The direction of the arrow