> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# SsoButton

> Trigger a single sign-on flow with a leading Ionicons glyph

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`SsoButton` specializes [`Button`](/ui/components/button) with the outline variant, an icon, and an accessibility label.

<LocalUiPlayground component="sso-button" title="Interactive SsoButton example" />

## Usage

```tsx theme={null}
import { SsoButton } from '@amisi-mobile-starter/ui';

export const GoogleSignIn = () => (
  <SsoButton
    iconName="logo-google"
    label="Continue with Google"
    onPress={() => {}}
  />
);
```

## Props

| Prop         | Type                                            | Default  | Description                               |
| ------------ | ----------------------------------------------- | -------- | ----------------------------------------- |
| `iconName`   | `React.ComponentProps<typeof Ionicons>['name']` | Required | Leading Ionicons glyph name.              |
| `label`      | `string`                                        | Required | Visible text and accessibility label.     |
| `onPress`    | `() => void`                                    | Required | Runs after an enabled press.              |
| `isDisabled` | `boolean`                                       | `false`  | Disables the button and blocks `onPress`. |
| `size`       | `'sm' \| 'md' \| 'lg'`                          | `'md'`   | Button size.                              |