Theme

Sound

Jump to a component

Core · Containers

FloatingToolbar

FloatingToolbar sits over a selection and offers what can be done with it.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

FloatingToolbar is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

FloatingToolbar is made for the web, and isn’t part of Sakuga for Android yet.

Use it for: What can be done with a selection, two or three ghost buttons just above it: Make it an event, Ask Maki.
Not for: A menu opened from a controlPopover
The actions of a viewViewHeader
The edit buttons under the editor's pictureMonitorBar

Guidelines

Two or three ghost buttons at most ("Make it an event", Ask Maki). Position it with style just above the selection.
It disappears when the selection does.

FloatingToolbarExample.jsxReact

import { Button, FloatingToolbar } from '@anicanon/sakuga/ui';

export default function FloatingToolbarExample() {
  return (
    <FloatingToolbar>
      <Button variant="ghost" size="sm" icon="plus">
        Make it an event
      </Button>
      <Button variant="ghost" size="sm">
        Ask Maki
      </Button>
    </FloatingToolbar>
  );
}

Props`FloatingToolbarProps`

childrenrequired

ReactNode

label

stringDefault 'Selection'

style

CSSProperties

Position it just above the selection.

className

string

FloatingToolbarExample.swiftiOS · coming soon

FloatingToolbarExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

toolbar-bgFloatingToolbar: surface.

bg-surface-raisedneutral-100#ececf0

bg-surface-raisedneutral-875#1a1a21

toolbar-borderFloatingToolbar: outline.

border-dividershade-a12rgba(11,10,16,0.12)

border-dividerwhite-a12rgba(255,255,255,0.12)

Space and shape

toolbar-gap

gap-2xs

2px

toolbar-padding

inset-xs

4px

toolbar-radius

radius-md

12px

toolbar-ring-width

line-hairline

1px

Motion

toolbar-rise-in-animation

motion-rise

sk-rise-in 240ms cubic-bezier(0, 0, 0, 1)