Callout - Frameworks

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Android

AndroidElementsiOSReactVue

Syntax

@Composable
fun WarpCallout(
    text: String,
    state: CalloutState,
    size: CalloutSize = CalloutSize.Default,
    type: CalloutType = CalloutType.Popover,
    inlineModifier: Modifier = Modifier,
    horizontalOffset: Dp = 0.dp,
    verticalOffset: Dp = 0.dp,
    edge: Edge = Edge.Top,
    closable: Boolean = false,
    dismissPopoverOnClickOutside: Boolean = true,
    onDismiss: () -> Unit,
    paddingOffset: Dp? = null,
    anchorView: @Composable (() -> Unit)? = null,
)

Basic WarpCallout with a Button anchor:

val state = remember { CalloutState(false) }

WarpCallout(
    text = "This is a callout",
    state = state,
    onDismiss = { state.isVisible = false },
) {
    WarpButton(
        text = "Show callout",
        onClick = {
            state.isVisible = !state.isVisible
        }
    )
}

The callout supports small and default size as well as inline or popup type:

enum class CalloutType {
    Popover,
    Inline
}

enum class CalloutSize {
    Small,
    Default
}

There are four types of edges - the direction in which the arrow will point - available. If not specified the default will be Edge.Top

enum class Edge {
    Top,
    Bottom,
    Leading,
    Trailing
}

To show/hide the callout you should pass a CalloutState and then toggle the boolean inside the onDismiss and anchor interaction method.

When using the CalloutType.Popover, you can adjust margins by using horizontalOffset and/or verticalOffset, which are 0.dp by default.

The callout accepts an anchor view that will be used to determine the position of the callout. If you use CalloutType.Popover it will automatically place itself pointing to the anchor view depending on the direction of the edge. To correctly display the arrow when the callout cannot be centered, please provide paddingOffset for the parent layout. To add anchor content:

val state = remember { CalloutState(false) }

WarpCallout(
    text = "This is a callout",
    edge = Edge.Leading,
    state = state,
    type = CalloutType.Popover,
    horizontalOffset = 8.dp,
    verticalOffset = 8.dp
    size = CalloutSize.Default,
    closable = false,
    paddingOffset = 8.dp,
    onDismiss = { state.isVisible = false },
) {
    WarpButton (
        text = "Show callout",
        onClick = {
            state.isVisible = !state.isVisible
        }
    )
}

When using the CalloutType.Inline variant, then use the inlineModifier param to adjust padding.

val state = remember { CalloutState(false) }

WarpCallout(
    text = "This is a callout",
    state = state,
    type = CalloutType.Inline,
    inlineModifier = Modifier.padding(8.dp),
    edge = Edge.Leading,
    size = CalloutSize.Small,
    closable = true,
    onDismiss = { state.isVisible = false },
) {
    WarpButton(
        text = "Inline",
        onClick = {
            state.isVisible = !state.isVisible
        }
    )
}

Legacy support

To support layouts still written in xml the WarpCallout can be used as a custom view. To add functionality to the onDismiss funtion, set a click listener. To provide an anchor view you need to set it programmatically as it acceps a @Composable () -> Unit param.

fun setOnDismissClickListener(onClick: OnClickListener?)

<com.schibsted.nmp.warp.components.legacy.WarpCalloutView
android:id="@+id/callout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:calloutEdge="leading"
app:calloutIsClosable="false"
app:calloutIsVisible="false"
app:calloutSize="small"
app:calloutText="This is the callout text"
app:calloutType="popover"
app:calloutVerticalOffset="0"
app:calloutHorizontalOffset="0" />

Parameters

Required props

Name	Type	Default	Description
title	String		The text to be displayed in the callout
state	CalloutState		The state of the callout. If visible or not
onDismiss	() -> Unit		The lambda to be invoked when dismissed

Optional Props

Name	Type	Default	Description
size	CalloutSize.Default CalloutSize.Small	CalloutSize.Default	Size of the callout
type	CalloutSize.Popover CalloutSize.Inline	CalloutSize.Popover	Type of the callout
inlineModifier	Modifier	Modifier	Modifier only used for the Inline callout type
horizontalOffset	Dp	0.dp	Horizontal offset used only for the Popover type callout
verticalOffset	Dp	0.dp	Vertical offset used only for the Popover type callout
edge	Edge.Top Edge.Bottom Edge.Leading Edge.Trailing	Edge.Top	Edge that determines the direction of the arrow
closable	Boolean	false	If should show the close icon
dismissPopoverOnClickOutside	Boolean	true	If should dismiss the callout when clicked outside it
paddingOffset	Dp	null	Padding offset in the parent layout to correctly calculate the arrow position in relation to the anchor
anchorView	@Composable () -> Unit	null	The anchor which the callout points to

Questions?

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